部署至Vercel后Google OAuth认证Cookie无法在浏览器存储问题

核心问题分析 #

你遇到的Cookie无法存储问题，主要是Cookie配置参数错误和Vercel HTTPS环境的强制要求导致的。本地localhost环境因浏览器规则宽松，未暴露这些问题。

具体修复步骤 #

1. 修正Cookie的Domain配置

代码中设置的domain带了https://协议头，这是错误的——Cookie的domain只能是纯域名（不含协议、端口）。

错误示例：

res.cookie('email', userInfo.email, { domain: 'https://toggle-to-qb.vercel.app', ... })

正确写法：

res.cookie('email', userInfo.email, { domain: 'toggle-to-qb.vercel.app', ... })

2. 添加Secure属性

Vercel部署的站点默认是HTTPS，现代浏览器要求非localhost环境下，Cookie必须设置Secure: true才能被存储，否则会被浏览器拦截。

3. 明确设置SameSite属性

为避免跨域或浏览器默认规则限制，建议明确设置SameSite属性：

• 若前端与后端回调路由属于同一域名：设置SameSite: 'Lax'（默认值，但显式设置更稳妥）
• 若为跨域场景（如后端在子域名、前端在主域名）：设置SameSite: 'None'（必须配合Secure: true）

4. 验证Redirect URI一致性

确保Google开发者控制台中配置的redirect_uri和代码中process.env.AUTH_REDIRECT_URI完全一致，包括协议、域名、路径，不能有任何差异（比如末尾的斜杠）。

修改后的完整Cookie配置示例 #

// 设置email Cookie
if(userInfo && userInfo.email) {
  res.cookie('email', userInfo.email, { 
    domain: 'toggle-to-qb.vercel.app', 
    path: '/', 
    httpOnly: false, 
    maxAge: 6 * 60 * 60 * 1000,
    secure: true, 
    sameSite: 'Lax' 
  })
}

// 设置sessionId Cookie
const sessionToken = googleAuth.generateSessionToken(userInfo);
res.cookie('sessionId', sessionToken, { 
  domain: 'toggle-to-qb.vercel.app', 
  path: '/',  
  httpOnly: true, 
  maxAge: 6 * 60 * 60 * 1000,
  secure: true,
  sameSite: 'Lax'
});

额外排查点 #

• 检查浏览器开发者工具的Application > Cookies面板，确认是否有被浏览器标记为"被拦截"的Cookie（悬停可查看拦截原因）
• 若后端是Vercel Serverless Functions，需确认函数响应头未被Vercel默认配置覆盖，可在Vercel控制台的函数设置中检查响应头规则
• 注意httpOnly: true的sessionId Cookie无法通过前端JS读取，但会存储在浏览器中，需在Application面板查看，而非通过document.cookie输出

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