带有 Axios 的 Django CSRF token

Question

情况:
我正在尝试使用 Vue.js 作为我的前端和 Django 作为我的后端来构建一个完整的 SPA。这些系统是完全独立的(不是后端提供 index.html 页面的混合应用程序)。
方法
我创建了一个 services我的 Vue-CLI 生成的项目中的目录，通过 api.js 为我的 REST API 提供一般可访问性文件(以下内容):

import axios from "axios";
import Cookies from "js-cookie";

axios.defaults.xsrfHeaderName = "X-CSRFToken";
axios.defaults.xsrfCookieName = "csrftoken";

const BackEnd = "http://127.0.0.1:8000/"; //local backend from manage.py runserver

export default axios.create({
  baseURL: `${BackEnd}api/`,
  timeout: 5000,
  headers: {
    "Content-Type": "application/json",
    "X-CSRFToken": Cookies.get('csrftoken')
  }
});

我怎么知道有这样的 token 可以得到？我编写了一个 API 端点，它在响应 header 中提供 token (如下所示):

Access-Control-Allow-Origin: *
Content-Length: 77
Content-Type: application/json
Date: Sun, 19 Jul 2020 18:04:06 GMT
Server: WSGIServer/0.2 CPython/3.7.6
Set-Cookie: csrftoken=HdM4y6PPOB44cQ7DKmla7lw5hYHKVzTNG5ZZJ2PqAUWE2C79VBCJbpnTyfEdX3ke; expires=Sun, 18 Jul 2021 18:04:06 GMT; Max-Age=31449600; Path=/; SameSite=Lax
Vary: Cookie, Origin
X-Content-Type-Options: nosniff
X-Frame-Options: DENY

问题
虽然我的 Django REST Framework API 正在为我的 GET 提供所有数据的创建工作请求，我似乎无法分配 csrftoken正确验证我的 POST要求。即使在我的 axios 请求中正确设置了 X-CSRFToken header ，我仍然会从服务器获得典型的 403(未设置 CSRF cookie)响应
请求头

Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Length: 247
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary9vOu1sBaQrXtXseR
DNT: 1
Host: 127.0.0.1:8000
Origin: http://127.0.0.1:8080
Referer: http://127.0.0.1:8080/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36
X-CSRFToken: T2Z7pzxKTAuCvBEIjkgRf8RGEEVLYfOyDYkYIcfkWCfSkPB76wCjMMizZvdTQPKg

更新
好吧，现在这只是一种痛苦!我在 A) Set-Cookie 响应 header 中有一个不同的 token 值，B) csrftoken 的值在我的浏览器 cookie 中，以及 C) 在 axios POST 请求中。谁能帮我弄清楚这里发生了什么？

Answer 1

我只是在我的 vue 应用程序中使用了它，一切都很顺利。

axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';

axios({
                    method: 'post',
                    url: 'http://127.0.0.1:8000/api/orders-update',
                    xstfCookieName: 'csrftoken',
                    xsrfHeaderName: 'X-CSRFToken',
                    data: updateIDs,
                    headers: {
                        'X-CSRFToken': 'csrftoken',
                    }
                }).then(response => console.log(response));