Next.js在getServerSideProps中无法获取Laravel设置的HttpOnly Cookie

核心原因 #

开发环境中Laravel后端与Next.js前端属于跨域服务，Cookie的跨域携带规则未配置正确，导致服务器端渲染（SSR）时getServerSideProps无法获取到Cookie。

分步解决措施 #

1. 前端登录请求必须携带Credentials #

发送登录POST请求时，必须开启credentials: 'include'，否则浏览器不会保存并后续携带Cookie：

// 示例：fetch请求写法
fetch('http://localhost:8000/api/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  credentials: 'include', // 关键配置
  body: JSON.stringify({
    username: 'your-username',
    password: 'your-password',
    rememberMe: true
  })
})

2. 配置Laravel允许跨域携带Credentials #

修改config/cors.php，开启跨域凭证支持：

return [
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:3000'], // 你的Next.js开发地址
    'allowed_headers' => ['*'],
    'supports_credentials' => true, // 必须设为true
    // 其他配置保持默认
];

3. 调整Laravel Cookie的Domain与SameSite设置 #

开发环境下，Cookie的Domain需匹配前端域名（localhost），SameSite使用lax而非none（none要求HTTPS，开发环境通常为HTTP，浏览器会拒绝）：
修改登录接口的Cookie生成代码：

$cookie = Cookie::make(
    'auth',
    $token,
    $loginData['rememberMe'] ? env('REMEMBER_ME_TTL', 525600) : env('JWT_TTL', 60),
    '/', // 路径设为根目录，确保全站可用
    'localhost', // 开发环境域名
    App::environment('production'), // Secure属性：生产环境才开启
    true, // HttpOnly：保持开启，提升安全性
    false, // 不限制Cookie访问
    App::environment('production') ? 'none' : 'lax' // SameSite配置
);

4. 验证Cookie是否正确存储 #

登录成功后，打开浏览器开发者工具的Application标签，查看Cookies > localhost下是否存在auth字段，确认Domain、Path、HttpOnly属性正确。

5. 优化Next.js跳转逻辑 #

登录成功后使用Next.js的前端路由跳转（如router.push('/')），而非硬刷新或后端跳转，确保Cookie被携带到SSR请求中。

验证修改后的withAuth逻辑 #

调整后的withAuth可以正常提取Cookie并验证：

import { GetServerSidePropsContext } from 'next';
import { ParsedUrlQuery } from 'querystring';

export function withAuth(
    gssp: (context: GetServerSidePropsContext<ParsedUrlQuery>) => Promise<any> = async () => { return { props: {} } }
) {
    return async function (context: GetServerSidePropsContext<ParsedUrlQuery>) {
        const { req, res } = context;
        const cookieHeader = req.headers.cookie;

        if (!cookieHeader) {
            return {
                redirect: {
                    destination: '/login',
                    permanent: false,
                },
            };
        }

        // 提取auth token
        const authToken = cookieHeader.split('; ')
            .find(row => row.startsWith('auth='))
            ?.split('=')[1];

        if (!authToken) {
            return {
                redirect: {
                    destination: '/login',
                    permanent: false,
                },
            };
        }

        // 可选：调用Laravel API验证token有效性
        // const validationRes = await fetch('http://localhost:8000/api/verify-token', {
        //   headers: { Authorization: `Bearer ${authToken}` },
        //   credentials: 'include'
        // });
        // if (!validationRes.ok) {
        //   return { redirect: { destination: '/login', permanent: false } };
        // }

        return await gssp(context);
    }
}

内容的提问来源于stack exchange，提问作者Yuval Zarfati