Django-ajax：CSRF 验证失败。请求中止

Posted 2023-05-08

【中文标题】Django-ajax：CSRF 验证失败。请求中止

【英文标题】：Django-ajax: CSRF verification failed. Request aborted

【发布时间】：2016-04-15 10:01:59

【问题描述】：

我正在使用 django 服务器端表单将详细信息保存在数据库中。

<form id="form_save_file" enctype="multipart/form-data">
% csrf_token %
      <label class="control-label col-md-4">File:</label>
        <div class="col-md-8">
            form.fa_file
        </div>
      <label class="control-label col-md-4">Name:</label>
        <div class="col-md-8">
            form.name
        </div>
</form>

我正在使用 ajax 发布请求。

$("#form_save_file").submit(function(e) 
        $.ajax(

           type: "POST",
           url: '/url/',
           data: $("#form_save_file").serialize(),
           contentType: false, 
           processData: false,
           success: function(data)
);

我在 settings.py 中包含了中间件类

MIDDLEWARE_CLASSES = (
    'django.middleware.common.CommonMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'request.middleware.RequestMiddleware'
)

当我在 ajax 请求中删除 contentType 和 processData 时，views.py 中的 request.FILES 为空，其他一切正常。

【参考方案1】：

contentType 选项为 false 用于 multipart/form-data 表单 传递文件。

当将 contentType 选项设置为 false 时，它​​会强制 jQuery 不 添加 Content-Type 标头，否则边界字符串将为 从中丢失。此外，通过多部分/表单一提交文件时 必须将 processData 标志设置为 false，否则，jQuery 将 尝试将您的 FormData 转换为字符串，这将失败。

尝试解决您的问题：

您正在使用 jQuery 的 .serialize() 方法创建一个文本字符串 采用标准 URL 编码表示法。

使用“contentType: false”时需要传递未编码的数据。

尝试使用“new FormData”而不是 .serialize()：

来源：https://***.com/a/20863123/3345051

修改后的代码：

$("#form_save_file").submit(function(e) 

    e.preventDefault();

    var $this = $(this);
    var postURL = '/url/';
    var formData = new FormData(this);


    $.ajax(
           type: "POST",
           url: postURL,
           data: formData,
           mimeType: "multipart/form-data",
           contentType: false,
           cache: false,
           processData: false
    )
    .done(function(response) 
        // Do something if POST is successful
    )
    .fail(function() 
        // Do something if POST is unsuccessful
    )

)

【讨论】：

太棒了！如果此答案有效，请按左侧的复选标记，以便其他人在需要帮助时也能看到此答案

【参考方案2】：

使用 @csrf_exempt 装饰器在特定视图上禁用 csrf 并使用随机数/字符串构建自定义安全性