Next.js+Express.js部署Vercel后Cookie中Token自动丢失问题排查

结合你的部署环境（Vercel上的Next.js + Express）和Cookie配置，导致生产环境Cookie刷新后消失的原因可能有以下几点：

1. 未指定domain属性导致跨域Cookie失效 #

如果你的前端Next.js和后端Express部署在Vercel的不同域名下（比如前端是your-frontend.vercel.app，后端是your-backend.vercel.app），或者前端使用自定义域名而后端用Vercel默认域名，此时Cookie如果未指定domain属性，只会绑定到后端的域名上。当前端页面刷新或跳转时，浏览器不会携带该Cookie到前端域名下，自然就会消失。

你的当前配置缺少domain字段，生产环境下需要根据实际域名设置：

• 如果使用Vercel默认域名，可设置为.vercel.app（让子域名共享Cookie）
• 如果使用自定义域名，设置为你的主域名（比如.yourdomain.com）

修改后的配置示例：

export const cookieOptions = {
    httpOnly: true,
    secure: isProduction,
    sameSite: isProduction ? 'none' : 'strict',
    path: '/',
    maxAge: 7 * 24 * 60 * 60 * 1000,
    domain: isProduction ? '.yourdomain.com' : undefined // 按需调整
};

2. Vercel Serverless函数的环境变量或响应头处理问题 #

如果你的Express是作为Vercel的Serverless函数部署，可能存在以下问题：

• process.env.NODE_ENV在Vercel生产环境未正确设置为production，导致secure或sameSite参数未按生产环境配置生效。比如secure被设为false，而Vercel生产环境强制使用HTTPS，浏览器会拒绝保存非secure的Cookie。
• Vercel对Serverless函数的响应头有一定限制，需确保Set-Cookie头被正确传递。可以在后端登录接口的响应中打印Set-Cookie头内容，验证是否符合预期。

3. 浏览器第三方Cookie限制 #

现代主流浏览器（Chrome、Firefox等）默认限制第三方Cookie。如果你的前后端域名不同，即使设置了sameSite: none和secure: true，浏览器仍可能阻止该Cookie的持久化存储。这种情况下：

• 建议将前后端部署在同一主域名下（比如前端app.yourdomain.com，后端api.yourdomain.com），并设置domain: '.yourdomain.com'
• 若无法统一域名，需引导用户在浏览器中开启第三方Cookie权限（但这不是通用解决方案）

4. Vercel部署的路径匹配问题 #

虽然你设置了path: '/'，但如果你的Express后端部署在Vercel的子路径下（比如/api），需确认Cookie的path是否覆盖了前端页面的访问路径。不过这种情况概率较低，可优先排查前三点。

内容的提问来源于stack exchange，提问作者N.M. Asif Sheikh