Laravel Sanctum SPA认证在Next.js前端无法正常工作

核心排查方向 #

Postman正常但浏览器请求失败，说明问题出在跨域Cookie传递或后端域名白名单配置上，以下是逐一解决的步骤：

1. 修正Laravel Sanctum状态域名配置 #

• 打开config/sanctum.php，确保stateful数组包含前端完整域名（含端口）：

  'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'localhost:3000,your-production-domain.com')),
  

• 在.env文件中设置正确的会话和状态域名：

  # 本地开发示例
  SESSION_DOMAIN=.localhost
  SANCTUM_STATEFUL_DOMAINS=localhost:3000
  
  # 生产环境示例（域名为example.com）
  SESSION_DOMAIN=.example.com
  SANCTUM_STATEFUL_DOMAINS=example.com
  

  注：SESSION_DOMAIN前缀的点用于让子域名共享Cookie，本地开发用.localhost即可。

2. 调整CORS配置支持凭证传递 #

打开config/cors.php，修改关键参数：

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:3000', 'https://your-production-domain.com'], // 替换为你的前端域名
    'allowed_headers' => ['*'],
    'supports_credentials' => true, // 必须设为true，否则浏览器不会传递Cookie
];

3. 确认路由中间件使用正确 #

确保获取用户信息的路由使用auth:sanctum中间件，而非默认的auth：

// routes/api.php
use Illuminate\Http\Request;

Route::middleware('auth:sanctum')->get('/v1/user', function (Request $request) {
    return $request->user();
});

4. 检查Cookie的SameSite属性 #

• 若前后端跨域部署，在.env中设置：

  SESSION_SAME_SITE=none
  SESSION_SECURE=true
  

  注：SESSION_SECURE=true要求网站使用HTTPS，本地开发HTTP环境可暂时设为false，生产环境必须开启HTTPS。
• 打开浏览器开发者工具的Application面板，确认laravel_session和XSRF-TOKEN的SameSite属性符合配置，且已成功存储。

5. Next.js请求的细节验证 #

虽然你的代码已添加credentials: 'include'，仍需确认：

• 所有需认证的请求（含获取用户信息）都携带该参数
• 认证相关请求建议在Next.js的Client Components中发起，Server Components需额外处理Cookie传递逻辑

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