Блог

Главная - Вопросы по программированию - Проблема с токеном CSRF, когда я добавляю dropzone в существующую форму в Django

Проблема с токеном CSRF, когда я добавляю dropzone в существующую форму в Django

#javascript #django #django-views #dropzone.js #django-csrf

Вопрос:

Я работаю с формой Django, используя dropzone для загрузки изображений. Но я не хочу добавлять зону выпадения во всю форму, только в ее раздел. Вот шаблон:

 {% 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.

Обратите внимание, что если я удалю class="dropzone dz" id="my-dropzone" его из div и вместо этого помещу в <form> тег, все будет работать. Проблема началась именно тогда, когда я переместил dropzone в div, потому что я не хотел, чтобы это применялось ко всей форме.

Вот мой код конфигурации 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')
    } */
});

Что мне нужно сделать, чтобы решить эту проблему?

Комментарии:

1. Если вы регистрируетесь $('meta[name="token"]').attr('content') , выглядит ли это правильно?

2. Вы имеете в виду создание консоли? войдите в консоль браузера? Я попробовал этот способ, я не определился.

3. Я сделал это с тобой. Это означает, что вы на самом деле не отправляете токен.

4. Поэтому, если я помещу class=»dropzone dz» id=»my-dropzone» в тег формы, я отправлю токен, а если я помещу его в div, я не отправлю токен. Большой вопрос в том, почему?

Ответ №1:

Глядя на документы django, я вижу, что это называется X-CSRFToken «нет X-CSRF-TOKEN «. Попробуйте исправить это и раскомментировать код заголовка.

Код, который я вижу в документах для получения токена document.querySelector('[name=csrfmiddlewaretoken]').value , попробуйте заменить этим своим. Просто убедитесь, что у вас где-то есть {% csrf_token %} страница.

Комментарии:

1. Я попробовал именно то, что вы предложили : заголовки: { ‘X-CSRFToken’: $(‘мета[имя=»токен»]’). attr(‘содержимое’) } Но у меня все еще та же проблема. Может быть, еще одно неверно написанное ключевое слово?

2. @Danilo отредактировал сообщение, чтобы включить правильный способ получения токена

3. О, здорово, что теперь это сработало. Таким образом, правильная линия 'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value;

Метки: ,