Cookie 未通过 Axios 发送

Question

我有一个基于 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 中设置默认值，它适用于 header key，但 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应用程序也是如此。

我已经为此苦苦挣扎了很长一段时间，有人可以向我指出问题出在哪里吗？

Answer 1

我也遇到了同样的问题，这就是我解决的方法

为了让 axios 发送 cookie

withCredentials

应该是

true

，而当

withCredentials

是

true

时，后端必须发送

Access-Control-Allow-Credentials

标头，否则你会收到 corsmissingallowcredentials 错误并且cookie不会在浏览器中设置（现在的问题是axios无法发送cookie，因为它们甚至没有在浏览器中设置）。

您说您已启用

CORS

，所以我假设您的

corsheaders

中有

INSTALLED_APPS

，并且您已将 vue 前端 url 添加到

CORS_ALLOWED_ORIGINS

中的

settings.py

列表中。您还应该将

CORS_ALLOW_CREDENTIALS = True

添加到

settings.py

。

现在在你的 vue 应用程序中设置 csrf cookie 和标头名称，如下所示，这样你就不需要手动获取 cookie 值并将其设置为

X-CSRFToken

标头，axios 会这样做。

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

然后在发出请求时将

withCredentials

设置为

true

，或者您可以将其设置为默认值，如下所示

axios.defaults.withCredentials = true;

您可以参考这个博文

Answer 2

从这里复制粘贴我的答案：

更新（2023 年 11 月）：

根据最新的变化，有一个新属性：

withXSRFToken

。 您需要显式设置它

true

才能发送 XSRF 令牌。

来自拉取请求：

因此现在用户必须显式将 withXSRFToken 设置为 true 才能将 XSRF 令牌发送到第三方来源。 默认情况下，withXSRFToken 未定义 - 令牌将仅发送到同一来源。