当我将 dropzone 添加到 Django 中的现有表单时出现 CSRF 令牌问题
CSRF Token problem when I add dropzone to an existing form in Django
我正在使用 Django 表单使用 dropzone 上传图像。但我不想将 dropzone 添加到整个表单,只是添加到其中的一个 div。这是模板:
{% extends 'base.html' %}
{% load static %}
{% load i18n %}
{% block content %}
<h6>UPLOAD MULTIPLE IMAGES NOW</h6>
<br>
<div class="formdiv" style="width:100%">
<form enctype="multipart/form-data" action="upload/" methd="POST">
{% csrf_token %}
<fieldset>
<label for="yourname">Yourname
<input type="text" value="name" />
</label>
<div class="dropzone dz" id="my-dropzone">
<div class="dz-message" data-dz-message><span>{% trans "Drop here or click to upload" %}</span></div>
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</div>
</fieldset>
</form>
</div>
{% endblock %}
问题是,当我尝试上传任何图片时,我收到一条禁止访问的错误消息,其中包含以下文本:
CSRF token missing or incorrect.
请注意,如果我从 div 中删除 class="dropzone dz" id="my-dropzone"
并将其放入 <form>
标记内,一切都会正常进行。当我在 div 中移动 dropzone 时问题就开始了,因为我不希望它应用于整个表单。
这是我的 dropzone 配置代码:
Dropzone.autoDiscover=false;
const myDropzone = new Dropzone('#my-dropzone',{
url:'upload/',
maxFiles:15,
maxFilesize:5, // 5 mb max
//parallelUploads:2,
// if image is horizontal, then resize it if it's more than resizeWidth
resizeWidth:1024,
// if the image is vertical, then resize if it's more than resizeHeight
resizeHeight:1024,
// also they can be mime such as image/png
acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg,.webp",
// default is false and it allows to delete uploaded files
addRemoveLinks: true,
// this is the element where the remove button or text will be located
dictRemoveFile: "<div><span class='fa fa-trash text-danger' style='font-size: 1.5em;cursor:pointer'></span></div>",
/* the following solution failed
headers: {
'X-CSRFToken': $('meta[name="token"]').attr('content')
} */
});
我需要做什么来解决这个问题?
查看 django docs 我看到它被调用
X-CSRFToken
不是 X-CSRF-TOKEN
。尝试修复该问题并取消注释您的 header 代码。
我在 the docs 中看到的获取令牌的代码是
document.querySelector('[name=csrfmiddlewaretoken]').value
尝试用它替换你的。请确保您的页面某处有 {% csrf_token %}
。
我正在使用 Django 表单使用 dropzone 上传图像。但我不想将 dropzone 添加到整个表单,只是添加到其中的一个 div。这是模板:
{% extends 'base.html' %}
{% load static %}
{% load i18n %}
{% block content %}
<h6>UPLOAD MULTIPLE IMAGES NOW</h6>
<br>
<div class="formdiv" style="width:100%">
<form enctype="multipart/form-data" action="upload/" methd="POST">
{% csrf_token %}
<fieldset>
<label for="yourname">Yourname
<input type="text" value="name" />
</label>
<div class="dropzone dz" id="my-dropzone">
<div class="dz-message" data-dz-message><span>{% trans "Drop here or click to upload" %}</span></div>
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</div>
</fieldset>
</form>
</div>
{% endblock %}
问题是,当我尝试上传任何图片时,我收到一条禁止访问的错误消息,其中包含以下文本:
CSRF token missing or incorrect.
请注意,如果我从 div 中删除 class="dropzone dz" id="my-dropzone"
并将其放入 <form>
标记内,一切都会正常进行。当我在 div 中移动 dropzone 时问题就开始了,因为我不希望它应用于整个表单。
这是我的 dropzone 配置代码:
Dropzone.autoDiscover=false;
const myDropzone = new Dropzone('#my-dropzone',{
url:'upload/',
maxFiles:15,
maxFilesize:5, // 5 mb max
//parallelUploads:2,
// if image is horizontal, then resize it if it's more than resizeWidth
resizeWidth:1024,
// if the image is vertical, then resize if it's more than resizeHeight
resizeHeight:1024,
// also they can be mime such as image/png
acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg,.webp",
// default is false and it allows to delete uploaded files
addRemoveLinks: true,
// this is the element where the remove button or text will be located
dictRemoveFile: "<div><span class='fa fa-trash text-danger' style='font-size: 1.5em;cursor:pointer'></span></div>",
/* the following solution failed
headers: {
'X-CSRFToken': $('meta[name="token"]').attr('content')
} */
});
我需要做什么来解决这个问题?
查看 django docs 我看到它被调用
X-CSRFToken
不是 X-CSRF-TOKEN
。尝试修复该问题并取消注释您的 header 代码。
我在 the docs 中看到的获取令牌的代码是
document.querySelector('[name=csrfmiddlewaretoken]').value
尝试用它替换你的。请确保您的页面某处有 {% csrf_token %}
。