Добавить CSRF в Fetch JS для Django

Question

У меня есть следующий код JS в моем шаблоне django:

fetch("http://127.0.0.1:8000/api/endpoint", {
      method: "POST",
      body: $("#form").serializeArray(),
    }).then(function(data) {
    });

В конечной точке api / я просто получаю:

Forbidden (CSRF token missing or incorrect.): /api/endpoint

Как добавить токен csrf в выборку?

Answer 1

У меня были проблемы с этим в течение нескольких часов в аналогичном проекте. Наконец-то я нашел решение! Я надеюсь, что эта информация поможет. Скрипт, который я использую, не входит в шаблон django, поэтому использование csrfmiddlewaretoken: '{{ csrf_token }}' для меня не сработает.

Я добавил в "credentials": 'same-origin', как указано выше, но также включил "X-CSRFToken": getCookie("csrftoken") , который использует функцию, включенную внизу. Мне понадобилась эта вторая часть. Итак, ваш код должен выглядеть примерно так:

fetch("http://127.0.0.1:8000/api/endpoint", {
  method: "POST",
  body: $("#form").serializeArray(),
  credentials: 'same-origin',
  headers: {
      "X-CSRFToken": getCookie("csrftoken")
  }
})
.then(function(data) {
})
.catch(err => console.log(err));

Затем вам нужно добавить эту функцию:

function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
        var cookie = jQuery.trim(cookies[i]);
        // Does this cookie string begin with the name we want?
        if (cookie.substring(0, name.length + 1) === (name + '=')) {
            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
            break;
        }
    }
}
return cookieValue;}

И, конечно, метод должен быть на той же странице. Взято из Django Docs. https://docs.djangoproject.com/en/1.11/ref/csrf/#ajax

Я нашел эту информацию из этого сообщения: { ссылка } от пользователя Ska

Answer 2

Внутри вашего тела вы можете передать токен csrf внутри вашего ajax запроса следующим образом:

body : {
   // Other stuff
   csrfmiddlewaretoken: '{{ csrf_token }}'
}

Это должно решить вашу проблему.

Изменить: Fetch не включает Файлы cookie по умолчанию внутри своего запроса. Для этого вам нужно добавить эту строку в запрос на выборку, как указано в опции:

credentials : 'include' // For Cors
credentials : 'same-origin' // For same origin requests