Почтовый запрос Django React axios: как получить csrftoken cookie? - PullRequest
Новая
       39

Почтовый запрос Django React axios: как получить csrftoken cookie?

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

Я использую Django rest framework в качестве моего бэкэнда (api) и React для внешнего интерфейса.

Теперь я хочу отправить данные формы POST в бэкэнд.Я хочу использовать защиту csrf из-за безопасности.Поэтому я пытаюсь вручную установить заголовок csrf для моего запроса axios, используя файл cookie csrftoken, отправленный Django.

Для этого я использую метод, рекомендованный в документации Django.: Link

Проблема, с которой я сталкиваюсь, заключается в том, что мне нужен файл cookie на моем компьютере, прежде чем я смогу добавить его в заголовок, и я не знаю, как получить файл cookie для возврата.от Django.

Основной вопрос: как мне получить файл cookie csrftoken на моем компьютере?(Хотя React рендерит форму без (изначально) какого-либо взаимодействия с бэкэндом Django)

Также, если вы обнаружите какие-либо проблемы с моим кодом, я бы хотел это знать.

Мой код

Вот мой текущий код, и я опишу то, что я попробовал:

django views.py:

from django.views.decorators.csrf import ensure_csrf_cookie


@ensure_csrf_cookie
def contact(request):
    if request.method == "POST":
        print(request.data)
    if request.method == "GET":
        return request

Изначально у меня была только часть POST вышеупомянутой функции.Но так как мне кажется, что Django не отправляет мне файл cookie csrftoken, я попытался добавить функциональность в представление для получения этого файла cookie, используя GET.(Я также пытался вернуть HttpResponse (""), без эффекта).

Как узнать, что у меня нет cookie? Я использую Chrome, переходя кНастройки> Дополнительно> Настройки контента> Файлы cookie> Просмотреть все файлы cookie и данные сайта

Здесь я отмечаю «127.0.0.1», поскольку React работает на «127.0.0.1:3000» (а Django на «127.0»).0.1: 8000 ").

Сначала я увидел файл cookie с именем" csrftoken ", похожий на тот, который мне нужен.Несмотря на то, что мой код не работал, я не мог отправить данные в бэкэнд.Затем я удалил куки, и с тех пор я не могу его вернуть.

Добавлено позже: я также проверил, вижу ли я куки, используя инструмент разработчика Chrome (в разделе application> cookies).

мои запросы axios: 

var axios = require('axios')
var jQuery = require('jquery')


module.exports = {
  ...
  submitForm: function(bodyFormData) {
    console.log("api.submitForm executes")
    axios({
      method: 'post',
      url: 'http://127.0.0.1:8000/customer/contact/',
      data: bodyFormData,
      config: { headers: {'Content-Type': 'multipart/form-data' }},
      headers: {"X-CSRFToken": this.getCookieValue('csrftoken')}
    })
      .then(function(response) {
        console.log('response success, response + data:')
        console.log(response)
        console.log(response.data)
        return response.data
      })
      .catch(function(response) {
        console.log('response error, response + data:')
        console.log(response)
        console.log(response.data)
      })
  },

  getCookieValue: function(name) {
    this.getCSRFCookie()
    let cookieValue = null
    if (document.cookie && document.cookie !== '') {
      let cookies = document.cookie.split(";")
      for (let i = 0; i < cookies.length; i++) {
        let cookie = jQuery.trim(cookies[i])
        if (cookie.substring(name.length + 1) === (name + '=')) {
          cookieValue = decodeURIComponent(cookie.substring(name.length + 1))
          break
        }
      }
    }
    console.log("cookieValue: " + cookieValue)
    return cookieValue
  },

  getCSRFCookie: function() {
    console.log("getCSRFCookie")
    axios.get('http://127.0.0.1:8000/customer/contact/')
  }
}

Просматривая приведенный выше код, я вижу, что, вероятно, возникнет проблема, даже если файл cookie будет отправлен.Я могу себе представить, что запрос на получение файла cookie еще не будет завершен, пока выполняется запрос POST для данных формы для серверной части.

Возможно, я смогу обойти это, выполнив запрос на получение файла cookie.загрузка формы, а не во время ее отправки.Но сейчас меня больше всего беспокоит доступ к файлам cookie.

Заранее спасибо!

1 Ответ

0 голосов
/ 16 августа 2019

Пакет npm django-react-csrftoken может вам помочь.Используйте его как компонент в вашей форме. 

import React from 'react';
import DjangoCSRFToken from 'django-react-csrftoken'

class MyLoginForm extends React.Component {
  render(){
    return (
      <div className="container">
          <form>
            <DjangoCSRFToken/>
            // xyz
            // submit button
          </form>
      </div>
    )
  }
}

Украсьте свой соответствующий вид django с помощью ensure_csrf_cookie, как упоминалось здесь .

...