Как отправить файл cookie CSRF из React в Django Rest Framework с помощью Axios - PullRequest
Новая
       58

Как отправить файл cookie CSRF из React в Django Rest Framework с помощью Axios

0 голосов
/ 08 января 2019

Я хочу сделать POST запрос от React приложения с использованием Axios к Django Rest Framework бэкэнду. Мне удалось получить CSRF-токен из бэкэнда, но мне не удается отправить его с моим запросом, поэтому я всегда получаю Forbidden (CSRF cookie not set.) ошибку:

Это код моего приложения React : 

handleClick() {
    const axios = require('axios');
    var csrfCookie = Cookies.get('XSRF-TOKEN');
    console.log(csrfCookie)
    axios.post('http://127.0.0.1:8000/es/api-auth/login/',
      {
        next: '/',
        username: 'admin@admin.com',
        password: 'Cancun10!',
      },
      {
        headers: {
          'x-xsrf-token': csrfCookie,  // <------- Is this the right way to send the cookie?
        },
        withCredentials = true,
      }
    )
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    })
  }

И это моя setings.py конфигурация CSRF: 

CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_HEADERS = (
    'xsrfheadername',
    'xsrfcookiename',
    'content-type',
    'XSRF-TOKEN',
)

CORS_ORIGIN_WHITELIST = serverconfig.CORS_ORIGIN_WHITELIST
CSRF_TRUSTED_ORIGINS = serverconfig.CSRF_TRUSTED_ORIGINS
CSRF_COOKIE_NAME = "XSRF-TOKEN"

1 Ответ

0 голосов
/ 08 января 2019

Django использует X-CSRFTOKEN в качестве заголовка csrf по умолчанию, см. здесь . Параметр CSRF_COOKIE_NAME, который вы используете в настройках Django, изменяет только имя файла cookie, которое по умолчанию равно csrftoken, см. здесь .

Чтобы решить вашу проблему, используйте этот заголовок в вашем вызове axios: headers: { 'X-CSRFTOKEN': csrfCookie }. Кроме того, удалите XSRF-TOKEN из CORS_ALLOW_HEADERS в настройках Django и вместо него добавьте X-CSRFTOKEN.

Используйте следующее: 

axios.post('http://127.0.0.1:8000/es/api-auth/login/',
    {
        next: '/',
        username: 'admin@admin.com',
        password: 'Cancun10!',
    },
    {
        headers: {
             'X-CSRFTOKEN': csrfCookie,
         },
    },
)
...