Django React axios post请求：如何获取csrftoken cookie？

Question

我正在使用Django rest framework作为我的后端(api)，并使用React作为前端。

现在我想要将表单数据提交到后端。出于安全考虑，我想要使用csrf保护。因此，我正在尝试手动设置axios请求的csrf头部，使用Django发送的csrftoken cookie。

为此，我使用了Django文档中推荐的方法(Link)。

我遇到的问题是，在我添加cookie到头部之前，我需要在我的机器上获取cookie，但我不知道如何让Django返回cookie。

主要问题：如何在我的机器上获取csrftoken cookie？（在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没有向我发送csrftoken cookie，我尝试添加功能来获取该cookie，使用GET方法。（我还尝试返回HttpResponse("")，但没有效果）。

如何知道我没有cookie？ 我使用Chrome，在设置中选择 > 高级设置 > 内容设置 > cookie > 查看所有cookie和站点数据。

在这里，我检查了“127.0.0.1”，因为React正在“127.0.0.1:3000”运行（而Django正在“127.0.0.1:8000”运行）。

最初，我确实看到了一个名为'csrftoken'的cookie，看起来像我需要的那个。尽管我的代码不起作用，我无法将数据POST到后端。然后我删除了cookie，自那以后就无法再次获得它。

稍后添加：

我还检查了Chrome开发工具（在应用程序 > cookie下）中是否有cookie。

我的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，可能仍然会出现问题。我可以想象，在执行向后端发送表单数据的POST请求时，获取cookie的请求可能尚未完成。也许我可以通过在加载表单时执行获取cookie的请求来解决这个问题，但是我现在最关心的是首先要访问cookie。提前感谢！

- Rik Schoonbeek

---

我遇到了同样的问题。我看到你已经等待了七个月的答案，这不是很令人鼓舞。 - HuLu ViCa

Answer 1

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，如 此处 所述。

- Anubhav Das