我在Nuxt/vuejs上构建了一个表单。在django的后端，CSRF保护被启用，现在API调用中有两个东西X-CSRFToken作为头，csrftoken作为Cookie，我通过Postman调用Api来测试Api，它工作正常，但如果Vue没有发送带有post请求的Cookie，让我给你看我的代码
Axios发布请求
const headers = {
"X-CSRFToken": "some token",
"Cookie": "csrftoken=some token",
}
await axios.post(`onboarding/first-name-last-name-email/`, {
"first_name": "uneeb2",
"last_name": "sad",
"email": "[email protected]"
}, {
headers: headers
}, {
withCredentials: true
})字符串
我也试过Fetch，是不是也有同样的问题
fetch(
'https://staging.goqube.io/api/onboarding/first-name-last-name-email/',
{ credentials: 'include' ,method: "POST",headers:headers} // could also try ''
).then(res => {
if (res.ok) return res.json()
// not hit since no 401
})型
我还尝试在axios中设置默认值，它适用于头键，但cookie仍然没有发送
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"型
这里要提到的一件重要的事情是CORS是由服务器启用的，所以我没有做任何具体的事情。
我还尝试将cookie设置为本机，
document.cookie = "csrftoken=some token; Path=/; Expires=Mon, 16 Feb 2023 08:02:50 GMT;";型
通过这个，我可以看到浏览器上设置的Cookie，但这仍然没有发送带有post请求的Cookie
正如你所看到的，我还尝试了withCredentials：true，这是常见的解决方案之一，但在我的情况下，这并不起作用。
关于服务器配置，Django服务器是一个独立的远程服务器，Nuxt App也是如此。
我一直在与这个问题斗争了很长一段时间，有人能告诉我问题出在哪里吗？
2条答案
按热度按时间atmip9wb1#
我也有同样的问题，我就是这样解决的
为了让axios发送cookie，
withCredentials应该是true，而withCredentials是true，后端必须发送一个Access-Control-Allow-Credentials头，否则你会得到一个cors missing allow credentials错误，cookie将不会在浏览器中设置（* 现在的问题是axios不能发送cookie，因为它们甚至没有在浏览器中设置为以 * 开头开始）。你说你已经启用了
CORS，所以我假设你的INSTALLED_APPS中有corsheaders，你已经将你的vue前端url添加到settings.py中的CORS_ALLOWED_ORIGINS列表中。你还应该将CORS_ALLOW_CREDENTIALS = True添加到settings.py。现在，在你的vue应用程序中，像下面这样设置csrf cookie和header名称，你不需要手动获取cookie值并将其设置为
X-CSRFTokenheader，axios会这样做。字符串
然后在发出请求时将
withCredentials设置为true，或者您可以将其设置为默认值，如下所示型
您可以参考this博客文章
de90aj5v2#
从这里复制粘贴我的答案：
更新（2023年11月）：
根据最新的修改，新增了一个属性：
withXSRFToken，需要显式设置true才能发送XSRF token。从pull request：
因此，现在用户必须显式地将withXSRFToken设置为true才能将XSRF令牌发送到第三方来源。默认情况下，withXSRFToken未定义-令牌将仅发送到相同的来源。