Axios 发送双 CSRF-Token [CSRF-Token mismatch]

Question

我有一个基本的 laravel/vue 和 sanctum 实现。 问题很简单：

我正在发送令牌请求并登录用户。 服务器发回一个新的令牌。 Axios 添加了这个令牌，但添加了另一个始终相同且已过期的令牌。

代码：

await APIClient.get("/sanctum/csrf-cookie")
return APIClient.post("/api/user/login", payload);

开发工具/网络选项卡：

• csrf-cookie request => response-headers具有有效的XSRF-TOKEN
• login request => request-headers , SET-COOKIE属性有XSRF-TOKEN (旧过期值) ; laravel_session ; XSRF-TOKEN （新的有效值）

我的问题是旧值。 我的代码中根本没有地方可以添加它。

这是我的 axios 客户端

const APIClient = axios.create({
    baseURL: constants.PATHS.url,
    withCredentials: true, // required to handle the CSRF token
});

非常感谢您的帮助。

Answer 1

对不起，我不太明白您的问题，您不知道如何将（旧过期值）或（新有效值）添加到 axios 的 header 中吗？ 我推荐使用 axios 作为 window 的属性。 更改其属性更容易：

window.axios.defaults.headers.common['token'] = "aaa"; //add a header

Answer 2

我找到了一个实际的解决方案。 每次登出都要清除文档的cookies，这样token永远是新的，旧的不能复制。 我已经看到在某些情况下会发生此错误。