Axios发送双重CSRF-Token引发[CSRF-Token不匹配]问题求助

我用Laravel结合Vue和Sanctum实现基础认证功能时遇到了问题：先请求/sanctum/csrf-cookie再发送登录请求，服务器返回新token，但Axios会同时添加一个始终相同且已过期的旧token。

代码示例 #

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

DevTools 网络面板现象 #

• csrf-cookie请求的响应头包含有效的XSRF-TOKEN
• 登录请求的响应头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
});

解决方案 #

1. 手动清除旧Cookie后再请求CSRF令牌

在请求/sanctum/csrf-cookie前，先清除浏览器中残留的旧Cookie，避免新旧Cookie冲突：

// 清除旧的XSRF-TOKEN Cookie
document.cookie = 'XSRF-TOKEN=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
// 清除旧的laravel_session Cookie
document.cookie = 'laravel_session=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';

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

2. 检查Laravel端配置

• 确认config/sanctum.php中的stateful数组包含你的前端域名，确保跨域Cookie能正确生效
• 检查config/session.php的domain、path、expire_on_close配置，保证Cookie的作用域和过期规则正确，避免旧Cookie残留
• 核对.env文件中的SESSION_DOMAIN和SANCTUM_STATEFUL_DOMAINS，确保与前端域名匹配（例如前端是localhost:3000，则SESSION_DOMAIN设为localhost，SANCTUM_STATEFUL_DOMAINS设为localhost:3000）

3. 手动更新Axios的CSRF请求头

在获取新的CSRF令牌后，手动提取最新的XSRF-TOKEN值并设置到Axios请求头中，强制使用新令牌：

await APIClient.get("/sanctum/csrf-cookie");
// 从Cookie中提取最新的XSRF-TOKEN
const xsrfToken = document.cookie.split('; ')
  .find(row => row.startsWith('XSRF-TOKEN='))?.split('=')[1];
if (xsrfToken) {
  APIClient.defaults.headers.common['X-XSRF-TOKEN'] = decodeURIComponent(xsrfToken);
}
return APIClient.post("/api/user/login", payload);

4. 排除浏览器缓存影响

• 使用浏览器隐私模式测试，确认是否是浏览器缓存的旧Cookie导致问题
• 检查是否有Cookie管理类浏览器插件，这类插件可能会自动保留旧Cookie，暂时禁用后再测试

内容的提问来源于stack exchange，提问作者Jaeger