Chrome未来将拦截跨站Cookie，如何调整现有配置（不愿前后端同部署）

一、适配Chrome最新规范的Cookie配置 #

你当前的Cookie配置已经踩对了大部分点，但补全以下细节就能避免后续版本拦截：

res
  .status(200)
  .cookie("token", token, {
    expires: new Date(Date.now() + Number(process.env.COOKIE_EXPIRE) * 24 * 60 * 60 * 1000),
    secure: true, // 前后端都是HTTPS，必须开启，这是Chrome跨域Cookie的硬性要求
    httpOnly: true, // 防XSS攻击，保持这个配置没问题
    sameSite: "none", // 跨域场景下必须设为none，且必须和secure:true搭配使用
    path: "/" // 确保Cookie在全站生效，默认就是/，显式声明更稳妥
  })

关键参数说明： #

• secure: true：Chrome从较新版本开始，要求跨域Cookie必须通过HTTPS传输，你的前后端都满足HTTPS，这个选项绝对不能关。
• sameSite: "none"：当前后端域名完全不同时，必须把这个值设为none，同时必须配合secure: true，这是Chrome隐私政策的强制要求，少一个都会导致Cookie被拦截。
• 若前后端是同一主域名下的子域名（比如前端app.yourdomain.com、后端api.yourdomain.com），可额外添加domain: ".yourdomain.com"实现Cookie共享；但你当前用的是Vercel和Render的独立域名，这个参数可以忽略。

二、必须配套的CORS后端配置 #

光Cookie配置正确还不够，后端的CORS必须允许凭证传递，以Express为例：

const cors = require('cors');
// 不要用*作为origin，必须明确指定你的前端Vercel域名
app.use(cors({
  origin: "https://your-frontend-vercel-url.vercel.app",
  credentials: true, // 开启这个才能让跨域请求携带Cookie
}));

前端请求同步设置 #

前端发起请求时，必须带上凭证标识：

• Axios示例：

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

• Fetch示例：

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

三、关于前后端部署位置的疑问 #

完全不需要把前后端部署在一起。只要满足以下条件，跨域名部署的前后端照样能正常传递Cookie：

1. 前后端都使用HTTPS协议（你已经满足）
2. Cookie配置符合上述规范（secure: true + sameSite: "none"）
3. 后端CORS明确指定前端域名，且开启credentials: true
4. 前端请求时携带凭证标识

Chrome后续版本拦截你的Cookie，大概率是CORS配置没匹配对，或者前端请求没带凭证，和部署位置无关。

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