Django表单中将Dropzone嵌入div时出现CSRF Token错误如何解决

报错根因：Dropzone绑定到form标签时会自动携带form内的csrfmiddlewaretoken隐藏域参数提交，绑定到div后组件不会主动读取form内的csrf参数，你之前的header方案失效大概率是页面不存在name为token的meta标签，或meta标签配置错误。

解决方法 #

• 方案1：直接从表单内读取csrf参数加到Dropzone提交参数中（无需额外配置meta标签，最稳妥）
  修改你的Dropzone配置，增加params配置项即可：

Dropzone.autoDiscover=false;
const myDropzone = new Dropzone('#my-dropzone',{
    url:'upload/',
    maxFiles:15,
    maxFilesize:5, // 5 mb max
    resizeWidth:1024,
    resizeHeight:1024,
    acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg,.webp",
    addRemoveLinks: true,
    dictRemoveFile: "<div><span class='fa fa-trash text-danger' style='font-size: 1.5em;cursor:pointer'></span></div>",
    // 新增以下配置，直接读取表单内的csrf token
    params: {
        csrfmiddlewaretoken: document.querySelector('input[name="csrfmiddlewaretoken"]').value
    }
});

• 方案2：修复header配置方案
  首先确保你的base.html的head标签内添加了对应的csrf meta标签：

<meta name="csrf-token" content="{{ csrf_token }}">

然后修改Dropzone的headers配置，正确读取meta标签内容：

headers: {
    'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').content
}

额外注意事项 #

你的form标签属性存在拼写错误，methd="POST"需要修改为method="POST"，避免后续常规表单提交出现异常。

内容的提问来源于stack exchange，提问作者Danilo