本地正常但部署到Vercel后无法设置Cookies问题排查

以下是部署到Vercel后无法设置Cookie的常见原因：

1. 缺少Secure和SameSite属性 #

Vercel部署的服务默认使用HTTPS协议，现代浏览器强制要求：只有标记为Secure的Cookie才能在HTTPS环境下被保存。如果你的前端和后端存在跨域场景，还需要同时设置SameSite: 'None'（必须配合Secure），否则浏览器会直接拦截Cookie。

你的代码未配置这两个属性，本地HTTP环境下浏览器不做强制校验，但Vercel的HTTPS环境会触发这个限制。

2. domain配置不匹配 #

你设置的domain: ".vercel.app"，如果实际部署域名是自定义域名（比如yourdomain.com），或是Vercel分配的具体子域名（比如your-project.vercel.app），这个domain值会和当前域名不匹配，导致浏览器无法识别并保存Cookie。

如果使用Vercel默认子域名，正确的domain应为your-project.vercel.app（无需前缀点），或者直接删除domain配置，让浏览器自动匹配当前域名。

3. CORS配置未允许凭证传递 #

如果前端页面和Vercel API不在同一域名下，必须确保CORS配置中开启credentials: true，同时响应头包含Access-Control-Allow-Credentials: true，否则前端无法接收并保存Cookie。

4. Vercel Serverless函数的响应头限制 #

Vercel的Serverless函数对响应头有部分限制，虽然Set-Cookie是允许的，但如果Cookie值过大（超过4KB）或包含特殊字符，可能会被Vercel网关拦截。

修改Cookie配置项，补充必要属性：

res.cookie("access-token", token, {
  maxAge: cookieAge,
  // 根据实际部署域名调整，或直接删除domain字段
  domain: "your-project.vercel.app", 
  secure: process.env.NODE_ENV === 'production', // 生产环境强制开启Secure
  sameSite: process.env.NODE_ENV === 'production' ? 'None' : 'Lax', // 跨域场景设为None
  httpOnly: true // 建议添加，降低XSS攻击风险
});

同时检查CORS配置，确保允许凭证传递（以Express框架为例）：

app.use(cors({
  origin: 'https://your-frontend-domain.com',
  credentials: true
}));

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