Django中使用POST方法使用ajax后出现403 “CSRF token missing or incorrect”

最新推荐文章于 2023-03-26 11:08:32 发布

原创最新推荐文章于 2023-03-26 11:08:32 发布 · 769 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#django #ajax #python

Pyhon 同时被 2 个专栏收录

10 篇文章

订阅专栏

Django

1 篇文章

订阅专栏

本文介绍了解决Django应用中AJAX请求时遇到的CSRF问题的方法。通过JavaScript获取CSRF token，并将其作为请求头添加到POST请求中，避免了403错误的发生。提供了两种获取token的方式及完整的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原因

Django的ajax中默认添加了token，因此需要在cookie中增加token头信息。

解决方案：

JS获取token，之后在POST的对象中增加请求头

1. JS获取token令牌

方式一：

function getCookie(name){
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

    if(arr=document.cookie.match(reg))

        return unescape(arr[2]);
    else
        return null;
}

方式二

    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;
     }

2.POST协议中增加请求头

Django 中ajex处理django403关键代码如下：

      headers: {
          "X-CSRFToken": getCookie("csrftoken"),// Django 403处理
       }

Django官方文档也给出了使用方式：

const request = new Request(
    /* URL */,
    {headers: {'X-CSRFToken': csrftoken}}
);
fetch(request, {
    method: 'POST',
    mode: 'same-origin'  // Do not send CSRF token to another domain.
}).then(function(response) {
    // ...
});

完成的点击按钮，POST传入文件信息和其他字段信息的js代码

    // 导入数据
    $("#btnUpload").click(function() {
        console.log("btnUpload click")
        var formData = new FormData();
        var formDataOld = new FormData(document.getElementById('uploadForm'))
        var fileHtml = formDataOld.get('csv_file');
        formData.append('csv_file', fileHtml);
        formData.append("bill_month", $("#need_input_bill_month").val());

        $.ajax({
                type: "POST",
                url: "{% url 'bill:aws-info-upload' %}",
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    "X-CSRFToken": getCookie("csrftoken"),// Django 403处理
                 },
                cache: false,
         });
    });

参考：
Django 3.2 csrf文档