NestJS+NextJS项目开发环境可正常设置Cookie 部署到Vercel后失效

1. 补全Cookie的Domain属性 #

你当前的Set-Cookie逻辑没有指定Domain字段，跨域名部署场景下（前端部署在Vercel域名、API部署在其他域名）浏览器会默认拒绝写入第三方Cookie。需要修改服务端生成Cookie的代码，明确指定前端所属域名：

public getCookieWithJwtToken(userId: number) {
    const payload: TokenPayload = { userId };
    const token = this.jwtService.sign(payload);
    // 替换为你的前端实际域名，前缀加.支持子域名访问
    return `Authentication=${token}; HttpOnly; Path=/; Secure; SameSite=None; Domain=.your-domain.com; Max-Age=${this.configService.get(
      'JWT_EXPIRATION_TIME',
    )}`;
}

2. 修正Nest服务的CORS配置 #

带凭证的跨域请求不允许CORS origin设置为*，必须明确指定前端域名，同时开启credentials支持：

// Nest主文件配置
app.enableCors({
  origin: 'https://你的Vercel前端域名', // 生产环境替换为实际域名，支持数组配置多个域名
  credentials: true,
  allowedHeaders: ['Content-Type', 'Authorization'],
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
})

3. 确认生产环境请求链路全为HTTPS #

你配置了Secure属性的Cookie只会在HTTPS请求下被写入和携带：

• 确认NEXT_PUBLIC_API配置的是API服务的HTTPS地址，不能用HTTP地址
• 确认API服务本身已经开启HTTPS访问

4. 检查Cookie大小合规性 #

Vercel对请求头大小有4KB的限制，若你的JWT载荷内容过多导致Cookie总大小超过4KB，浏览器会自动丢弃该Cookie，建议精简JWT内的载荷内容。

快速排查技巧 #

打开浏览器控制台的「网络」面板，找到登录请求的响应条目，查看Set-Cookie字段旁的黄色警告标识，点击后会显示浏览器拒绝写入Cookie的具体原因，可直接定位问题。

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