页面刷新/切换路由后Cookie丢失的原因排查（附代码）

1. 域名不匹配导致Cookie无法跨路径携带 #

后端CORS配置的origin是http://localhost，但前端请求API用的是http://127.0.0.1:80，这两个地址在浏览器中被判定为不同域名，Cookie会因同源策略限制无法被正确携带到其他路由。

• 修复：统一前后端域名，要么前端请求地址改为http://localhost:80/api/v1/users/login，要么将后端CORS的origin设置为http://127.0.0.1，确保两者完全一致。

2. SameSite与Secure配置冲突 #

当设置sameSite: 'none'时，现代浏览器强制要求同时开启secure: true（仅在HTTPS环境下生效），否则Cookie会被浏览器视为无效并忽略。你当前secure: false的配置会导致Cookie无法被持久化保存。

• 修复：
  • 本地开发（HTTP环境）：将sameSite改为'lax'或'strict'，同时保持secure: false；
  • 生产环境（HTTPS环境）：保留sameSite: 'none'并设置secure: true。
    优化后的Cookie配置示例：

  const cookieOptions = {
    expires: new Date(Date.now() + process.env.COOKIE_EXPIRES_IN * 24 * 60 * 60 * 1000),
    httpOnly: false,
    sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
    secure: process.env.NODE_ENV === 'production',
  }
  

3. Cookie路径限制 #

默认情况下，Cookie的生效路径是当前请求的路径（如/api/v1/users/login），这意味着只有访问该路径及其子路径时才会携带Cookie，访问/tours这类其他路径时Cookie不会被发送。

• 修复：添加path: '/'配置，让Cookie在整个域名下的所有路径都有效：

  const cookieOptions = {
    expires: new Date(Date.now() + process.env.COOKIE_EXPIRES_IN * 24 * 60 * 60 * 1000),
    httpOnly: false,
    sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
    secure: process.env.NODE_ENV === 'production',
    path: '/' // 新增路径配置
  }
  

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