@nurzhannogerbek

“CSRF token missing or incorrect” в AJAX / Django?

Здравствуйте! Как исправить данную проблему?

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

7c2a98d11cbf4a61993671b9b4c4a9b4.PNG

Я так понял в AJAX нужно как-то передать CSRF, нашел в официальной документации страницу: Cross Site Request Forgery protection. Только вот как прикрутить ее не совсем понял. Помогите пожалуйста решить данную проблему.

JS:
$(function () {
    var loadForm = function () {
        var btn = $(this);
        $.ajax({
            url: btn.attr("data-url"),
            type: 'get',
            dataType: 'json',
            beforeSend: function () {
                $("#modal").modal("show");
            },
            success: function (data) {
                $("#modal .modal-content").html(data.html_task_form);
            }
        });
    };

    var saveForm = function () {
        var form = $(this);
        $.ajax({
            url: form.attr("action"),
            data: form.serialize(),
            type: form.attr("method"),
            dataType: 'json',
            success: function (data) {
                if (data.form_is_valid) {
                    $("#task-list").html(data.html_task);
                    $("#modal").modal("hide");
                }
                else {
                    $("#modal .modal-content").html(data.html_task_form);
                }
            }
        });
        return false;
    };
    // Create Task
    $("#task-add-button").click(loadForm);
    $("#modal").on("submit", ".js-task-add-form", saveForm);
    // Update Task
    $("#task-list").on("click", "#js-edit-task-button", loadForm);
    $("#modal").on("submit", ".js-task-edit-form", saveForm);
});
  • Вопрос задан
  • 9375 просмотров
Пригласить эксперта
Ответы на вопрос 3
@Nekr0z
Чтобы "в AJAX передать CSRF", нужно выполнить AJAX-запрос с параметром:
data: {csrfmiddlewaretoken: getCookie('csrftoken')}

Функция getCookie() описана на той странице документации, что ты нашёл.
Ответ написан
Тебе нужно добавить в форму скрытый input с csrf токеном. Примерно так:
<form method="post">
                        {% csrf_token %}
                        {% for field in form %}
                                {{ field.errors }}
                                {{ field.label_tag }}
                                {{ field }}
                        {% endfor %}
                        <button type="submit"Submit</button>
                    </form>

Отправлять можешь так:
var saveForm = function () {
        var form = $(this);
        var formData = new FormData(this);
        $.ajax({
            url: form.attr("action"),
            data: formData,
            contentType: false,
            processData: false,
            type: form.attr("method"),
            success: function (data) {
                if (data.form_is_valid) {
                    $("#task-list").html(data.html_task);
                    $("#modal").modal("hide");
                }
                else {
                    $("#modal .modal-content").html(data.html_task_form);
                }
            }
        });
        return false;
    };
Ответ написан
@JonGalt
У меня работает вот так:

Сделал себе универсальную функцию для post запросов через ajax:
function ajax_post(url, form_id, block_id) {
            var form = $(form_id).serialize();
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: form,
                    dataType: 'html',
                    success: function (data) {
                        $(block_id).html(data);
                    }
                });
                return false;
        }

а потом просто ссылаюсь на нее в формах
<form action="javascript:void(null);" onsubmit="ajax_post('{% url 'companies' project %}', '#project_company_form', 
       '#content')" id="project_company_form">
      {% csrf_token %}
         {{ form.company }}
      ....
         <button type="submit"> Add </button>
   </form>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы