ReactJS & Django: Как правильно отправить токен csrf с помощью axios? - PullRequest
Новая
       41

ReactJS & Django: Как правильно отправить токен csrf с помощью axios?

0 голосов
/ 06 мая 2018

Я довольно новичок в использовании ReactJS с Django.

То, что я хочу, просто. Я хочу отправить запрос на создание аккаунта. Front-End сервер и Back-End сервер полностью разделены. Они общаются только с AJAX, и ничего более, они даже не находятся на одном сервере.

Я пробовал несколько способов отправить запрос на создание аккаунта, но ничего не получалось.

Вот что я пробовал в JavaScript:

  1. Добавить опцию с именем withCredentials:true для axios. Это добавляет cookie в заголовок, но django говорит: «csrftoken неверен или не установлен».

  2. Установите следующее: 

    axios.defaults.xsrfHeaderName = "X-CSRFToken";
axios.defaults.xsrfCookieName = 'csrftoken';

-> это не дает никаких эффектов.

  1. Установите следующее: 

    axios.defaults.headers.common = {
  'X-Requested-With': 'XMLHttpRequest',
  'X-CSRF-TOKEN' : (document.cookie).replace("csrftoken=", "")
};

-> это заставляет axios делать только запросы метода "option". но я не знаю почему и, конечно, это не работает.

Вот что я изменил в настройках Django.py:

CSRF_COOKIE_NAME = "X-CSRFToken"
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
CORS_EXPOSE_HEADERS = (
    'Access-Control-Allow-Origin: *',
)

и, конечно, я добавил @ensure_csrf_cookie чуть выше представления, которое делает некоторые вещи регистрирующими.

Есть ли способ это исправить? Я трачу много времени на это. Мне действительно нужна твоя помощь. спасибо.

1 Ответ

0 голосов
/ 20 марта 2019

Вы можете установить js-cookie через npm (или другими подходящими вам способами) по ссылке здесь

Назовите Cookies в js-cookie примерно так: import Cookies from 'js-cookie';

Затем возьмите куки, выполнив: Cookies.get()

Cookies.get() дает вам объект, который содержит csrftoken. Таким образом, вы можете сделать что-то вроде этого:

const cookies = Cookies.get()

Тогда в заголовках в вашем запросе axios вы можете добавить это:

headers: new Headers({"Content-Type": "application/json", 'X-CSRFToken': cookies.csrftoken})

...