Next.js中如何在getServerSideProps获取服务端Cookie？

你完全可以从/pages/login的getServerSideProps中访问/api/users/signin设置的Cookie，但你的现有代码存在几个需要调整的细节，以下是具体分析和正确实现方式：

核心逻辑说明 #

HttpOnly类型的Cookie虽然无法被前端JS读取，但服务端的getServerSideProps运行在Node.js环境中，属于服务端请求上下文，因此可以正常获取Cookie。不过要注意：只有在用户完成登录请求（调用/signin接口并成功设置Cookie）后，后续对/login页面的请求（比如刷新页面、跳转后返回）才会携带该Cookie——首次加载/login页面时，登录请求还未发起，自然拿不到Cookie。

你的代码存在的问题 #

1. 直接传递context.req.headers给checkAuth不够高效，headers.cookie是字符串格式（如token=xxx; key=yyy），需要解析为键值对才能直接使用token；
2. Cookie设置的Secure属性会导致本地HTTP环境下Cookie不生效，需要根据环境动态配置；
3. 缺少Path=/和SameSite=Lax属性，可能导致Cookie无法在全站范围内被携带。

正确实现步骤 #

1. 优化Cookie设置逻辑 #

调整/api/users/signin中的Cookie设置代码，适配开发和生产环境：

const isProduction = process.env.NODE_ENV === 'production';
res.setHeader(
  "Set-Cookie",
  `token=${token}; HttpOnly; Secure=${isProduction}; Path=/; SameSite=Lax`
);

• Path=/：确保Cookie在全站所有路径下都能被访问；
• SameSite=Lax：避免跨站请求中的Cookie限制；
• Secure=${isProduction}：仅在生产HTTPS环境下启用Secure，本地HTTP开发时自动关闭，避免Cookie无法设置。

2. 在getServerSideProps中正确解析Cookie #

先安装cookie包用于解析Cookie字符串：

npm install cookie

然后修改getServerSideProps代码：

import cookie from 'cookie';

export async function getServerSideProps(context) {
  // 解析Cookie字符串为键值对对象，处理无Cookie的情况
  const cookies = cookie.parse(context.req.headers.cookie || '');
  const token = cookies.token;

  let response;
  if (token) {
    // 将解析后的token传入checkAuth，而非整个headers
    response = await checkAuth(token);
  } else {
    // 未登录状态的默认返回
    response = { authenticated: false };
  }

  return {
    props: { response },
  };
}

3. 额外注意事项 #

• 本地测试Secure Cookie时，可通过HTTPS=true启动Next.js：

HTTPS=true npm run dev

• 如果登录后需要立即在/login页面获取Cookie，不能依赖当前页面的getServerSideProps（因为它在登录请求前已执行），可以在登录成功后通过router.reload()刷新页面，或者跳转到其他页面再返回。

内容的提问来源于stack exchange，提问作者some guy