无法在javascript获取中设置Django X-CSRF令牌_Javascript_Django_Csrf_Django Csrf_Csrf Token

无法在javascript获取中设置Django X-CSRF令牌

javascript django

无法在javascript获取中设置Django X-CSRF令牌,javascript,django,csrf,django-csrf,csrf-token,Javascript,Django,Csrf,Django Csrf,Csrf Token,我试图在javascript中生成一个csrf令牌，并使用fetch将其与POST请求一起使用。在我的html中，我在head下有以下脚本标记以生成csrf令牌： <head> <script type="text/javascript"> var user = '{{request.user}}' function getCookie(name) { let cookieValue

我试图在javascript中生成一个csrf令牌，并使用fetch将其与POST请求一起使用。在我的html中，我在head下有以下脚本标记以生成csrf令牌：

<head>
    <script type="text/javascript">
        var user = '{{request.user}}'

        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
        var csrftoken = getCookie('csrftoken');

        console.log(csrftoken)
    </script>
</head>


var user='{request.user}}'
函数getCookie（名称）{
让cookieValue=null；
if（document.cookie&&document.cookie！=''）{
常量cookies=document.cookie.split（“；”）；
for（设i=0；i


然后在body下，我有以下脚本标记，在其中检索csrftoken变量并将其传递给fetch（）中的'X-csrftoken'头：
<body>
    <script type="text/javascript">
        console.log('Hello World')
        console.log(csrftoken)

        var updateButtons = document.getElementsByClassName('update-cart')

        for(i = 0; i < updateButtons.length; i++){
            updateButtons[i].addEventListener('click', function(){
                var productId = this.dataset.product
                var action = this.dataset.action
                console.log('productId: ', productId, 'action: ', action)

                console.log('user: ', user)

                if(user === 'AnonymousUser'){
                    console.log('Not logged in.')
                }else{
                    updateUserOrder(productId, action)
                }
            })
        }

        function updateUserOrder(productId, action){
            console.log('User is authenticated. Sending data...')
            console.log(csrftoken)

            var url = '/update_item/'

            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type':'application/json',
                    'X-CSRFToken':csrftoken,
                },
                body: JSON.stringify({'productId': productId, 'action': action})
            })

            .then((response) => {
                return response.json()
            })

            .then((data) => {
                console.log('data: ', data)
            })
        }
    </script>
</body>


console.log（'Hello World'）
console.log（csrftoken）
var updateButtons=document.getElementsByClassName（'update-cart'）
对于（i=0；i{
返回response.json（）
})
。然后（（数据）=>{
console.log（'数据：'，数据）
})
}

所有console.log（）调用都会显示csrftoken变量，但仍会出现以下异常：
(index):169 POST http://127.0.0.1:8000/update_item/ 500 (Internal Server Error)
updateUserOrder
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

（索引）：169个帖子http://127.0.0.1:8000/update_item/ 500（内部服务器错误）
更新顺序
未捕获（承诺中）语法错误：JSON中位置0处的意外标记<

views.py
def update_item(request):
    data = json.loads(request.data)
    product_id = data['productId']
    action = data['action']

    print('action: ', action)
    print('product_id: ', product_id)

    customer = request.user.customer
    product = Product.objects.get(id=product_id)

    order, created = Order.objects.get_or_create(customer=customer, complete=False)
    orderitem, created = OrderItem.objects.get_or_create(order=order, product=product)

    if action == 'add':
        orderitem.quantity += 1
    elif action == 'remove':
        orderitem.quantity -= 1

    orderitem.save()

    if orderitem.quantity <= 0:
        orderitem.delete()

    return JsonResponse('Item was added.', safe=False)

def更新项目（请求）：
data=json.load（request.data）
产品id=数据['productId']
动作=数据['action']
打印（'操作：'，操作）
打印（'产品标识：'，产品标识）
customer=request.user.customer
product=product.objects.get（id=product\u id）
订单，已创建=订单.对象.获取或创建（客户=客户，完成=假）
orderitem，created=orderitem.objects.get\u或\u create（订单=订单，产品=产品）
如果操作==“添加”：
orderitem.quantity+=1
elif操作==‘删除’：
orderitem.quantity-=1
orderitem.save（）
如果orderitem.quantity已解决。这不是我的javascript或其中的csrftoken变量的问题。而是在我的服务器代码中。
在views.py中，我输入了data=json.loads（request.data）
。但它应该是data=json.loads（request.body）解决的。这不是我的javascript或其中的csrftoken变量的问题。而是在我的服务器代码中。
在views.py中，我输入了data=json.loads（request.data）
。但是应该是data=json.loads（request.body）
您必须检查服务器是如何处理请求的，并最终导致错误<代码>@Teemu在服务器上，我返回Json响应。我已经用我的查看功能更新了我的问题，以便您检查。但是POST请求导致csrf验证失败，所以我得到了这个错误。不，您打算返回JSON，但是服务器端代码失败（500内部服务器错误），它会响应错误页面或包含正确信息的错误消息。错误在我的服务器端代码中。在views.py中，我输入了data=json.loads（request.data）
。但是它应该是data=json.loads（request.body）
。您必须检查服务器是如何处理请求的，并最终导致错误<代码>@Teemu在服务器上，我返回Json响应。我已经用我的查看功能更新了我的问题，以便您检查。但是POST请求导致csrf验证失败，所以我得到了这个错误。不，您打算返回JSON，但是服务器端代码失败（500内部服务器错误），它会响应错误页面或包含正确信息的错误消息。错误在我的服务器端代码中。在views.py中，我输入了data=json.loads（request.data）
。但是它应该是data=json.loads（request.body）
。