Next.js部署Vercel后SSR请求中Token Cookie无法获取问题求助

核心问题分析 #

部署到Vercel后，SSR的getServerSideProps中通过nookies的parseCookies无法获取connect.sid Cookie，但本地开发正常。这通常是浏览器未将Cookie发送至Vercel服务端，或Vercel边缘网络对Cookie的过滤导致，而非代码逻辑本身问题。

排查与解决步骤 #

1. 验证服务端是否接收到Cookie #

先排除nookies库的问题，手动解析请求头中的Cookie：

export const getServerSideProps = async (context) => {
  const { req } = context;
  // 手动解析Cookie
  const rawCookie = req.headers.cookie;
  console.log('Raw Cookie:', rawCookie); // 去Vercel函数日志查看输出
  const cookies = rawCookie ? Object.fromEntries(rawCookie.split('; ').map(c => c.split('=', 2))) : {};
  const token = cookies['connect.sid'];
  console.log('Parsed Token:', token);
  
  // 后续逻辑...
};

• 如果rawCookie为空，说明浏览器未将Cookie发送给Vercel服务端，重点检查Cookie属性配置。
• 如果rawCookie包含connect.sid但nookies解析失败，尝试升级nookies版本或确认其兼容性。

2. 检查Cookie的关键属性（重点） #

Vercel部署的站点强制HTTPS，浏览器对Cookie的安全要求更严格，需确保connect.sid满足以下条件：

• Secure属性: 必须设为true。非Secure的Cookie在HTTPS环境下会被浏览器拒绝发送。
• SameSite属性:
  • 若API与Vercel站点为不同域名，需设为None（同时必须搭配Secure）。
  • 同域名场景可设为Lax或Strict。
• Domain属性:
  • 使用自定义域名时，需将Domain设为.yourdomain.com（包含所有子域名）或留空（默认当前域名）。
  • 使用Vercel默认域名（如xxx.vercel.app）时，Domain不能设置为其他域名，需留空或设为xxx.vercel.app。

3. 排查Vercel边缘网络的Cookie过滤 #

Vercel的边缘网络可能会过滤不符合规范的Cookie：

• 确保Cookie的名称和值符合RFC规范（无特殊字符，避免空格等）。
• 在Vercel控制台的Functions日志中查看请求头的cookie字段，确认是否被截断或过滤。

4. 排除页面缓存影响 #

getServerSideProps页面默认是动态渲染，但如果意外被缓存，会导致SSR逻辑不执行：

• 在页面组件中添加缓存控制头，强制禁用缓存：

  export async function getServerSideProps(context) {
    context.res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
    // 后续逻辑...
  }
  

• 前往Vercel控制台的Deployments页面，查看对应页面的缓存状态，确认未被静态缓存。

5. 跨域场景额外检查 #

若你的API与Vercel站点分属不同域名：

• 确保API服务器的响应头包含Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin设为Vercel站点的具体域名（不能用*）。
• 前端登录时的请求需携带credentials: 'include'，确保Cookie被正确设置到浏览器。

内容的提问来源于stack exchange，提问作者Farouk Allani