跨域请求丢失 Cookie 通常是因为浏览器默认策略变更，后端需在 Set-Cookie 响应头中显式配置 SameSite=None 并启用 Secure 属性。该方案适用于前后端域名不一致且已部署 HTTPS 的生产环境，HTTP 环境下强制配置 Secure 会导致 Cookie 被拒绝写入。
先说结论：解决跨域 Cookie 丢失必须同时设置 SameSite=None 和 Secure 标志，且全站必须启用 HTTPS 协议。
- 适合：前后端域名不同且需要携带身份认证 Cookie 的场景
- 先准备：确保证书有效，HTTP 请求会自动升级为 HTTPS
- 验收：浏览器开发者工具 Network 面板确认 Set-Cookie 头属性完整
命令速用版
不同后端框架设置响应头的方式不同，核心都是修改 Set-Cookie 字段。
Node.js (Express): res.cookie('id', '123', { sameSite: 'none', secure: true })Java (Spring): response.setHeader("Set-Cookie", "id=123; SameSite=None; Secure")Nginx: add_header Set-Cookie "id=123; SameSite=None; Secure";
为什么会这样
Chrome 80 及以上版本将 Cookie 的默认 SameSite 策略从无限制变更为 Lax，限制了跨站请求携带 Cookie。
Lax 模式允许顶级导航携带 Cookie，但阻止跨站 POST 请求或 iframe 加载时发送 Cookie。若业务需要跨域携带凭证，必须显式声明 SameSite=None，同时浏览器安全策略规定 None 必须搭配 Secure 使用，否则 Cookie 会被直接忽略。
分步处理
1. 确认域名关系：检查前端域名与后端 API 域名是否一致，不一致则视为跨站。
2. 启用 HTTPS：SameSite=None 强制要求 Secure 标志，HTTP 协议下配置 Secure 会导致 Cookie 写入失败。
3. 修改后端代码：在生成 Cookie 的逻辑中显式添加 SameSite=None 和 Secure 参数。
4. 清除旧 Cookie：浏览器可能缓存了旧策略的 Cookie，测试前需手动清除相关域下的所有 Cookie。
怎么验证是否生效
打开浏览器开发者工具，切换到 Network 标签，刷新页面或触发请求。
点击后端接口请求，查看 Response Headers 中的 Set-Cookie 字段，确认包含 SameSite=None 和 Secure。
切换到 Application 标签下的 Cookies 栏，确认该 Cookie 的 Secure 列显示为勾选状态，且跨域请求时 Cookie 列有值。
常见坑
1. HTTP 环境配置 Secure：本地开发若未配 HTTPS，设置 Secure 会导致 Cookie 无法写入，本地调试可暂时用 SameSite=Lax 或关闭浏览器安全策略。
2. 旧版本浏览器兼容性：iOS 12 及以下或旧版 Safari 可能无法识别 SameSite=None，需做 User-Agent 兼容处理。
3. 顶级域名不一致：若前端是 a.com 后端是 b.com，即使设置 None 也可能被某些浏览器隐私策略拦截，需确保业务域名可信。
常见问题
HTTP 协议下能配置 SameSite=None 吗
不能，浏览器安全规范强制要求 SameSite=None 必须搭配 Secure 标志，而 Secure 标志只能在 HTTPS 下生效。
本地 localhost 调试需要配置 Secure 吗
Chrome 将 localhost 视为安全上下文，本地调试时配置 Secure 通常可以生效，但建议开发环境暂时使用 Lax 策略减少麻烦。
配置后 Cookie 还是丢失怎么办
检查是否清除了旧 Cookie，确认后端响应头确实已更新，并检查浏览器控制台是否有 Cookie 被拒绝的警告日志。
参考来源
- MDN Web Docs: SameSite Cookie attribute, https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Set-Cookie/SameSite
- Chrome Developers: SameSite Cookies Explained, https://developer.chrome.com/blog/samesite-cookies-explained