Laravel Sanctum对接Nuxt3时无法设置CSRF Cookie问题求助

核心问题分析 #

你遇到的浏览器无法接收XSRF-TOKEN Cookie的问题，主要是后端Cookie域配置错误、CORS未开启凭证支持导致的——Postman能正常获取是因为它不严格遵循浏览器的跨域Cookie规则。

1. 修正后端.env配置 #

原配置中SESSION_DOMAIN=localhost:3000错误，Cookie的域不能包含端口，需改为localhost；同时必须添加SANCTUM_STATEFUL_DOMAINS指定允许的前端域名：

FRONTEND_URL=http://localhost:3000
SESSION_DOMAIN=localhost
SESSION_DRIVER=cookie
SANCTUM_STATEFUL_DOMAINS=localhost:3000

修改后重启Laravel服务，确保配置生效。

2. 配置Laravel CORS规则 #

打开config/cors.php，确保以下关键配置正确，尤其是supports_credentials必须设为true，否则浏览器会拒绝接收Cookie：

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => [env('FRONTEND_URL', 'http://localhost:3000')],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

3. 前端Nuxt3请求配置 #

用Fetch API的情况

保持credentials: 'include'的配置，同时确保没有其他请求拦截器修改该属性：

window.fetch('http://localhost:8000/sanctum/csrf-cookie', {
  credentials: 'include',
}).then((response) => {
  console.log([...response.headers])
})

用Axios的情况

在nuxt.config.ts中全局配置Axios的凭证支持：

export default defineNuxtConfig({
  modules: ['@nuxtjs/axios'],
  axios: {
    baseURL: 'http://localhost:8000',
    withCredentials: true
  }
})

也可以通过插件进一步确保配置生效（创建plugins/axios.ts）：

export default defineNuxtPlugin((nuxtApp) => {
  const axios = nuxtApp.$axios
  axios.defaults.withCredentials = true
})

4. 额外排查点 #

• 关闭浏览器隐私模式测试：隐私模式会限制第三方Cookie存储，即使是同域名不同端口也可能受影响。
• 检查浏览器插件：部分广告拦截或隐私插件会自动拦截Cookie，暂时禁用后重试。
• 验证响应头：在浏览器开发者工具的Network面板中，查看sanctum/csrf-cookie请求的响应头，确认存在Set-Cookie字段，且包含XSRF-TOKEN和laravel_session。

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