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

Posted 2023-02-22

【中文标题】ReactJS 和 Django：如何以正确的方式使用 axios 发送 csrf 令牌？

【英文标题】：ReactJS & Django : How can I send csrf token with axios in a proper way?

【发布时间】：2018-10-16 11:34:31

【问题描述】：

我对在 Django 中使用 ReactJS 还是很陌生。

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

我尝试了多种方法来发送创建帐户的请求，但均未奏效。

这是我在 javascript 中尝试过的：

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

设置如下：

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

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

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

【问题讨论】：

你试过npmjs.com/package/django-react-csrftoken吗？

致 Arpit，是的，我也试过了。我为我的视图设置了一些注册的东西

CSRF with Django, React+Redux using Axios的可能重复

给 Kiara，是的，我也试过了。

【参考方案1】：

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

在js-cookie 中调用 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)