如何在axios POST请求中附加csrf头和值

Question

当用户使用提供的表单注册时，我需要发送CSRF令牌。

但是，由于注册/登录将是第一次与django REST API交互，所以我在加载网页时创建一个虚拟GET请求，以从django中检索CSRF令牌。

检索令牌并将其存储在cookie中。

但是，我仍然从django获得Forbidden (CSRF cookie not set.)。

这是我的axios POST请求。

import axios from 'axios'
axios.defaults.xsrfCookieName = 'vcubes'
axios.defaults.xsrfHeaderName = 'X-CSRFToken'

let req = {
    url: 'http://localhost:9000/vcubes/signup/',
    method : 'POST',
    headers: {
        'Content-Type': 'text/plain'
    },
    data: data
}

注：

当我在axios POST中将withCredentials: true添加到标题中时，浏览器会发送OPTIONS请求而不是POST。

Answer 1

  let csrftoken = Vue.$cookies.get('vcubes')

  return axios.post('', data, {
    headers: {
      'X-CSRFToken': csrftoken
    }
  }).then(response => {
    return response.data
  })

这与 Shane 的回答非常相似，但展示了如何在 Vue 中获取 csrf 令牌。如果您的问题是获取 cookie，那么 this SO answer 应该可以帮助您。

Answer 2

这是我在Django中使用的：

result = { "insert your key values here" }
data = JSON.stringify(result)
axios.post("{% url 'error_checking' %}", data, {headers: {'X-CSRFToken': '{{ csrf_token }}',}})