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

我使用Django rest框架作为后端（api），并对前端进行响应

现在我想将表单数据发布到后端。出于安全考虑，我想使用

csrf

保护。因此，我尝试使用Django发送的

csrftoken

cookie为我的

axios

请求手动设置

csrf

头

我遇到的问题是，我需要在我的机器上安装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

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/')
  }
}

最初，我只有上述函数的POST部分。但由于Django似乎没有向我发送

csrftoken

cookie，因此我尝试使用get向视图添加功能以获取该cookie。（我还尝试返回一个HttpResponse（“”），但没有效果）

我怎么知道我没有饼干？ 我正在使用Chrome，进入设置>高级>内容设置>cookies>查看所有cookies和站点数据

这里我签入“127.0.0.1”，因为React在“127.0.0.1:3000”下运行（Django在“127.0.0.1:8000”下运行）

最初，我确实看到了一个名为“csrftoken”的cookie，看起来就像我需要的那个。即使我的代码不起作用，我也无法将数据发布到后端。然后我删除了cookie，从那以后我再也无法找回它了

稍后添加： 我还检查了是否使用Chrome开发工具（在应用程序>cookies下）看到cookie

我的axios请求：

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

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/')
  }
}

var-axios=require（'axios'））
var jQuery=require（'jQuery'）
module.exports={
...
submitForm:函数（bodyFormData）{
console.log（“执行api.submitForm”）
axios({
方法：“post”，
网址：'http://127.0.0.1:8000/customer/contact/',
数据：bodyFormData，
配置：{headers:{'Content-Type'：'multipart/form data'}，
标题：{“X-CSRFToken”：this.getCookieValue（'CSRFToken'）}
})
.然后（功能（响应）{
console.log（'响应成功，响应+数据：'）
console.log（响应）
console.log（response.data）
返回响应.data
})
.catch（函数（响应）{
console.log（'响应错误，响应+数据：'）
console.log（响应）
console.log（response.data）
})
},
getCookieValue:函数（名称）{
this.getCSRFCookie（）
让cookieValue=null
if（document.cookie&&document.cookie！=''）{
让cookies=document.cookie.split（“；”）
for（设i=0；i

在查看上述代码时，我发现即使发送cookie，也可能会出现问题。我可以想象，获取cookie的请求还没有完成，而表单数据到后端的POST请求正在执行

也许我可以在加载表单时执行获取cookie的请求，而不是在发送表单时执行。但我现在最关心的是，首先要访问cookie

---

提前谢谢

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>
    )
  }
}

从“React”导入React；
从“django react csrftoken”导入django csrftoken
类MyLoginForm扩展了React.Component{
render（）{
返回(
//xyz
//提交按钮
)
}
}

---

用前面提到的

确保\u csrf\u cookie

装饰相应的django视图。

我也有同样的问题。我可以看出你已经等了七个月的答案，不是很乐观