ReactJS & Django：如何以正确的方式使用 axios 发送 csrf 令牌？

Question

我对将 ReactJS 与 Django 结合使用还很陌生。

我想要的很简单。我想发送创建帐户的请求。前端服务器和后端服务器是完全分开的。它们仅通过 AJAX 进行通信，仅此而已，它们甚至不在同一服务器中。

我尝试了多种方法来发送创建帐户的请求，但没有任何效果。

这是我在 JavaScript 中尝试过的：

1. 添加一个在 axios 上调用的选项withCredentials:true。这会在 header 上添加 cookie，但 django 说“csrftoken 不正确或未设置”。

2. 设置以下内容：

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

-> 这不会产生任何效果。

3. 设置以下内容：

   axios.defaults.headers.common = {
     'X-Requested-With': 'XMLHttpRequest',
     'X-CSRF-TOKEN' : (document.cookie).replace("csrftoken=", "")
   };
   

-> 这使得 axios 仅发出“选项”方法请求。但我不知道为什么，当然，这是行不通的。

这是我在 Django 的 settings.py 中更改的内容：

CSRF_COOKIE_NAME = "X-CSRFToken"
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
CORS_EXPOSE_HEADERS = (
    'Access-Control-Allow-Origin: *',
)

当然，我在执行一些注册操作的视图上方添加了@ensure_csrf_cookie。

有没有什么办法解决这一问题？我为此花费了很多时间。我真的需要你的帮助。谢谢。

Answer 1

您可以js-cookie通过 npm （或其他适合您的方法）链接进行安装

像这样调用 Cookie js-cookie： import Cookies from 'js-cookie';

然后通过执行以下操作获取cookie：Cookies.get()

Cookies.get()给你一个包含csrftoken. 所以你可以总体上做这样的事情：

const cookies = Cookies.get()

然后在 axios 请求的标头中，您可以添加以下内容：

headers: new Headers({"Content-Type": "application/json", 'X-CSRFToken': cookies.csrftoken})