Next.js 13服务组件结合Laravel Sanctum获取用户数据遇阻

问题核心分析 #

你手动拼接Cookie的方式存在冗余，且可能破坏了Next.js服务端fetch的默认凭证处理逻辑。服务组件中调用Laravel Sanctum接口的关键在于正确传递用户请求的原始Cookie，同时确保Laravel端的认证配置无误。

修正后的Next.js API路由代码 #

移除手动拼接Cookie的冗余逻辑，直接传递原始请求的Cookie头：

// api/user/route.ts
import { NextResponse } from 'next/server'

export async function GET(request: Request) {
    // 提取用户请求中的原始Cookie头
    const cookieHeader = request.headers.get('Cookie');
    
    const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/user`, {
        credentials: 'include',
        headers: {
            // 仅当存在Cookie时传递，避免空值导致错误
            ...(cookieHeader && { Cookie: cookieHeader })
        }
    });

    // 处理认证失败的情况
    if (!res.ok) {
        return NextResponse.json(
            { error: '认证失败' }, 
            { status: res.status }
        );
    }

    const user = await res.json();
    return NextResponse.json({ user });
}

必须检查的Laravel配置项 #

1. Sanctum状态域名配置
   在.env文件中添加Next.js的域名（开发环境示例）：

   SANCTUM_STATEFUL_DOMAINS=localhost:3000
   

   生产环境替换为你的Next.js实际域名。

2. CORS跨域配置
   修改config/cors.php：

   return [
       'paths' => ['api/*', 'sanctum/csrf-cookie'],
       'allowed_methods' => ['*'],
       'allowed_origins' => ['http://localhost:3000'], // 替换为你的Next.js域名
       'allowed_origins_patterns' => [],
       'allowed_headers' => ['*'],
       'exposed_headers' => [],
       'max_age' => 0,
       'supports_credentials' => true, // 必须设为true
   ];
   

3. API路由保护
   确保routes/api.php中的/api/user路由使用auth:sanctum中间件：

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

4. Cookie安全配置（跨域场景）
   如果Next.js和Laravel在不同域名下，修改config/session.php：

   'same_site' => 'none',
   'secure' => env('SESSION_SECURE_COOKIE', true),
   

   注意：same_site: none仅适用于HTTPS环境，开发环境可暂时保持lax。

服务组件中调用示例 #

在Next.js服务组件中直接调用上述API路由即可，无需额外处理Cookie：

// app/user/page.tsx (服务组件)
async function UserPage() {
    const res = await fetch('/api/user');
    const { user } = await res.json();

    return <div>当前用户：{user.name}</div>;
}

export default UserPage;

内容的提问来源于stack exchange，提问作者Giovanni Della Cagna