Nuxt+Laravel Sanctum环境下Axios获取的Cookie未在应用面板显示

这种情况核心是跨域场景下的浏览器Cookie安全策略限制，结合你的前后端配置，逐一排查以下几点：

后端Laravel配置检查 #

• 确认.env文件中SESSION_DOMAIN值为localhost（不要加端口号），确保跨端口请求能共享Cookie域名。
• 确认.env中SANCTUM_STATEFUL_DOMAINS包含localhost:3000，该配置指定允许发起有状态请求的前端域名。
• 检查config/cors.php，将supports_credentials设为true，这是跨域请求允许携带/存储Cookie的核心开关。
• 确认config/sanctum.php的middleware数组包含以下两个中间件，负责Cookie的生成与响应：

  \Illuminate\Http\Middleware\AddQueuedCookiesToResponse::class,
  \Illuminate\Cookie\Middleware\EncryptCookies::class,
  

前端Nuxt Axios配置检查 #

• 全局或单个请求必须开启withCredentials: true，告诉浏览器在跨域请求中处理Cookie。比如在nuxt.config.js的Axios配置中添加：

  axios: {
    baseURL: 'http://localhost',
    withCredentials: true
  }
  

• 确保请求URL正确，直接使用http://localhost/sanctum/csrf-cookie（后端端口80为默认端口，无需显式添加）。

浏览器环境排查 #

• 不要在隐私模式下测试，隐私模式会默认限制第三方Cookie存储（即使是同一主域名跨端口）。
• 检查响应头中Set-Cookie的属性：如果浏览器将不同端口视为跨站点，需确保Cookie的SameSite属性设为None；本地localhost的HTTP环境下，可暂时将.env中的SESSION_SAMESITE设为Lax或None测试。

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