为何Next.js应用部署在Vercel上无法设置Cookie？

核心问题分析 #

Cookie的域名配置不能包含协议（https://），你之前设置的https://flight-six.vercel.app和.https://flight-six.vercel.app都是错误格式，域名仅需填写主机名部分。

正确配置步骤 #

• 设置正确的Cookie域名：直接使用flight-six.vercel.app，无需加协议或前缀点（除非需要跨子域名，你的场景不需要）。
• 开启Secure属性：Vercel部署的站点是HTTPS环境，必须将secure设为true，否则浏览器会拒绝保存Cookie。
• 配置SameSite属性：根据业务需求设为lax或strict，前后端同域场景下lax足够；若涉及跨域请求，可设为none（需配合secure: true）。
• 检查Path属性：确保Path设为/，让Cookie在整个站点生效，避免仅在特定路径下可用。

示例代码（Next.js API路由） #

// pages/api/login.js
export default function handler(req, res) {
  // 登录验证逻辑...

  res.setHeader('Set-Cookie', [
    `authToken=your_token_value; HttpOnly; Secure; SameSite=Lax; Domain=flight-six.vercel.app; Path=/; Max-Age=86400`
  ]);
  
  res.status(200).json({ success: true });
}

额外排查点 #

• 检查Vercel的CORS配置：若API和前端不在同一域名，需确保CORS允许携带Cookie，设置credentials: true。
• 浏览器开发者工具验证：打开Chrome DevTools的Application面板，查看Cookie是否被正确存储；若显示"Not set"，查看控制台警告信息（通常会提示Cookie被拒绝的原因）。
• 区分本地与生产环境：本地开发时可通过环境变量判断域名，避免配置冲突：

const domain = process.env.NODE_ENV === 'production' ? 'flight-six.vercel.app' : 'localhost';

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