django - ReactJS & Django : How can I send csrf token with axios in a proper way?

Question

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

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

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

这是我在 JavaScript 中尝试过的:

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

2. 设置以下内容:

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

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

设置以下内容:

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: *',
)

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

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

Answer 1

您可以通过npm(或其他适合您的方法)安装js-cookie链接here

在 js-cookie 中调用 Cookie，如下所示: 从“js-cookie”导入 Cookie；

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

Cookies.get() 为您提供一个包含 csrftoken 的对象。所以你总体上可以做这样的事情:

const cookies = Cookies.get()

然后在 axios 请求的 header 中，您可以添加以下内容:

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