跨域场景下Laravel Sanctum配合Vue3的API身份验证问题咨询

核心疑问回复 #

你的认知存在部分偏差：withCredentials: true的Cookie身份验证方案并非完全不支持跨域场景，Sanctum原生适配该场景，仅需完成前后端的配套配置即可正常运行。

同域名部署下的运行情况 #

如果前后端部署在同域名下，仅需做以下基础配置即可正常使用Cookie身份验证：

• 前端axios全局配置withCredentials: true
• 登录请求前先调用Laravel提供的/sanctum/csrf-cookie接口初始化CSRF凭证

无需额外配置即可稳定运行，安全性远高于localStorage存储Token的方案，带HttpOnly属性的Cookie可避免XSS攻击窃取身份凭证。

跨域场景下的适配方案 #

分两种场景完成配置：

场景1：前后端为同根域名（如前端app.xxx.com、后端api.xxx.com） #

1. 前端配置保持不变：
   • axios全局开启withCredentials: true
   • 所有鉴权请求前先调用/sanctum/csrf-cookie接口
2. 后端Laravel配置：
   • 修改config/cors.php：

     'supports_credentials' => true,
     'allowed_origins' => ['https://app.xxx.com'], // 精确填写前端域名，禁止使用*
     'paths' => ['api/*', 'sanctum/csrf-cookie', 'login', 'logout'] // 覆盖所有需要跨域访问的路径
     

   • 修改config/sanctum.php，在stateful数组中添加前端域名：

     'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
         '%s%s',
         'app.xxx.com,localhost:5173', // 加入前端域名，本地开发域名也可一同加入
         env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''
     ))),
     

   • 修改config/session.php，设置Cookie根域名：

     'domain' => '.xxx.com', // 前缀加.表示所有子域名均可访问该Cookie
     

场景2：前后端为完全不同的根域名（如前端a.com、后端b.com） #

除上述配置外，还需要调整Cookie的跨域访问权限：

• 修改config/session.php：

  'secure' => true, // 必须开启HTTPS才生效
  'same_site' => 'none', // 允许第三方场景下携带Cookie
  

注意：该场景下浏览器会校验站点是否符合第三方Cookie使用规范，部分用户手动关闭第三方Cookie的情况下可能无法正常使用，该情况属于浏览器安全限制，无其他绕过方案。

备选安全方案 #

如果确实无法使用Cookie方案，可采用Sanctum的API Token方案，需满足以下安全规范：

• 身份Token仅存储在前端内存（如Pinia/Vuex状态）中，关闭页面即失效
• 搭配有效期更长的刷新Token，刷新Token存储在带HttpOnly、Secure属性的Cookie中
• 身份Token有效期建议控制在15分钟以内，可大幅降低被盗用的风险

内容的提问来源于stack exchange，提问作者Mladen Krznarić