Chrome删除JWT Cookie问题：设置Secure和SameSite=None仍失效

核心问题分析 #

你遇到的是跨域请求中的Cookie共享限制：后端托管在fly.io（独立域名），前端在vercel（另一独立域名），属于完全跨域场景，浏览器的同源策略会严格限制Cookie的传递；而Postman不受浏览器同源策略约束，因此测试正常。

分步排查与修复 #

1. 修正后端CORS配置 #

跨域请求下，后端必须明确允许前端域名的请求，并开启凭证支持：

• 禁止使用通配符*作为Access-Control-Allow-Origin，必须指定前端的完整HTTPS域名
• 必须设置Access-Control-Allow-Credentials: true

如果使用Express的cors中间件，配置示例：

const cors = require('cors');

app.use(cors({
  origin: 'https://drew-book-jo6x-f97k35gp8-andrew-marabantes-projects.vercel.app',
  credentials: true,
  allowedHeaders: ['Content-Type']
}));

2. 移除错误的Cookie Domain设置 #

你尝试设置domain: '.drew-book-jo6x-f97k35gp8-andrew-marabantes-projects.vercel.app'是错误的：

• 后端只能设置自身域名的Cookie，没有权限操作前端域名的Cookie，这会导致res.cookie无法生成有效Cookie
• 直接删除domain参数，让Cookie默认绑定到后端的fly.io域名即可

修正后的Cookie设置代码：

res.cookie('jwt', accessToken, { 
  httpOnly: true, 
  path: '/', 
  sameSite: 'None', 
  secure: true 
})

3. 确保前端请求携带凭证 #

前端发起请求时，必须显式开启凭证携带：

• 若使用axios：

  axios.get('/api/your-protected-endpoint', {
    withCredentials: true
  })
  

• 若使用fetch：

  fetch('/api/your-protected-endpoint', {
    credentials: 'include'
  })
  

4. 浏览器端验证 #

打开Chrome开发者工具（F12）：

• Application标签：查看Cookies下的后端fly.io域名，确认登录后是否存在jwt Cookie
• Network标签：
  • 检查登录请求的Response Headers，确认Set-Cookie字段存在且无浏览器警告
  • 检查后续GET请求的Request Headers，确认Cookie字段包含jwt=xxx

关键注意事项 #

• sameSite: 'None'和secure: true必须同时设置，Chrome要求跨域Cookie必须是HTTPS且SameSite为None
• 确保后端服务是HTTPS（fly.io默认提供HTTPS，无需额外配置）
• 生产环境前端必须直接请求后端真实域名，不能再使用开发环境的代理配置

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