NestJS-React应用生产环境Session Cookie设置后未随请求携带

问题背景 #

React前端部署在Vercel，NestJS后端部署在Fly.io，采用GitHub OAuth认证。登录时Session Cookie能成功设置并在浏览器存储中可见，但后续请求后端时未携带该Cookie，导致401 Unauthorized，本地环境正常。

核心排查与解决步骤 #

1. 明确Cookie的Domain属性配置 #

跨域场景下，若未指定domain，浏览器会默认将Cookie绑定到后端域名（如xxx.fly.dev），部分浏览器对跨域Cookie的处理会更严格。修改后端Cookie配置，显式指定后端域名：

res.cookie("sessionId", session._id.toString(), {
  httpOnly: true,
  secure: true,
  sameSite: "none",
  expires: expiresCurrentTimeZone,
  path: "/",
  domain: "xxx.fly.dev", // 替换为你的Fly.io后端域名
});

注意：若后端使用自定义域名，需确保域名是二级及以上，且与前端域名无主域冲突。

2. 强制前端与后端使用HTTPS #

Secure属性的Cookie仅在HTTPS请求中生效：

• 确认前端NEXT_PUBLIC_SERVER_URL环境变量值为HTTPS开头（如https://xxx.fly.dev），避免HTTP请求导致Cookie不被携带。
• 检查Fly.io后端服务是否强制HTTPS：Fly.io默认提供HTTPS，但可在应用控制台确认TLS配置是否正常，避免内部转发出现HTTP链路。

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

现代浏览器（Chrome、Firefox等）默认限制第三方Cookie，即使设置了SameSite=None和Secure，仍可能被拦截：

• 方案一：使用同主域子域名：将前端和后端配置为同一主域的子域名（如app.yourdomain.com和api.yourdomain.com），此时Cookie可设置domain: ".yourdomain.com"，成为第一方Cookie，避开限制。
• 方案二：替换为Bearer Token：放弃Cookie，将Session ID放在请求头的Authorization: Bearer <sessionId>中，前端登录后将Session ID存在localStorage或sessionStorage，后续请求手动添加该头。

4. 验证CORS配置的精确性 #

带凭证的CORS请求要求Access-Control-Allow-Origin为精确域名，不能用通配符：

• 确认后端NEXT_PUBLIC_CLIENT_URL环境变量值为前端完整HTTPS域名（如https://xxx.vercel.app），无多余斜杠或协议错误。
• 通过浏览器Network面板检查后端响应头，确认Access-Control-Allow-Credentials: true和Access-Control-Allow-Origin为前端域名。

5. 检查Fly.io代理与日志 #

• Fly.io的反向代理可能修改请求头，可在应用日志中查看request.cookies是否为空，确认后端是否接收到Cookie。
• 若使用Fly.io的自定义域名，检查域名解析是否正确，避免出现跨域域名不匹配的情况。

6. 验证Cookie的Expires/Max-Age属性 #

确保Cookie的过期时间设置正确，避免Cookie刚设置就过期。可简化过期时间测试：

expires: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000), // 30天过期

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