#Cookie 跨域问题详解

在 Web 开发中，Cookie 是最常见的客户端存储机制之一，用于记录用户登录状态、偏好设置、会话信息等。然而，当涉及到 跨域请求 时，Cookie 的行为往往变得复杂，尤其在现代浏览器的安全策略下，跨域 Cookie 的传递和写入都有严格的限制。

本文将从基础概念开始，逐步讲解 Cookie 的跨域机制、SameSite 属性、CORS 配置及常见问题解决方案。

#一、Cookie 的基础概念

Cookie 是存储在浏览器中的一小段键值对数据，通常用于： - 维护用户登录状态（如 session_id） - 存储用户行为偏好 - 在客户端与服务端之间保持会话一致性

Cookie 由服务端通过响应头 Set-Cookie 设置，例如：

复制Set-Cookie: token=abc123; Path=/; Domain=example.com; HttpOnly; Secure

#Cookie 的主要属性

属性 说明

Domain 指定 Cookie 所属的域名 Path 指定 Cookie 在该域下的生效路径 Expires / Max-Age 过期时间或有效时长 Secure 仅在 HTTPS 环境下传输 HttpOnly 禁止通过 JS 访问（防止 XSS 攻击） SameSite 限制跨站请求中是否携带 Cookie

#二、什么是跨域

跨域（Cross-Origin） 指浏览器访问的源（Origin）不同。
浏览器认为以下三者完全相同才算同源：

• 协议（Protocol）
• 域名（Host）
• 端口（Port）

例如：

源 是否同源

https://www.example.com vs ❌ 不同域名 https://api.example.com

http://example.com vs ❌ 不同协议 https://example.com

#https://example.com:8080 ❌ 不同端口 vs https://example.com:443

#三、跨域 Cookie 的传递问题

当浏览器发起 跨域请求（例如 https://frontend.com 调用 https://api.backend.com）时，默认情况下 不会携带 Cookie。
这是因为浏览器出于安全考虑，限制了第三方网站的 Cookie 自动传递。

#举例：

复制// 前端请求
fetch('https://api.backend.com/user/info', {
  method: 'GET',
  credentials: 'include', // 想携带 Cookie 必须加这个
});

如果没有 credentials: 'include'，请求中不会带上任何 Cookie。

#四、SameSite 属性的核心作用

SameSite 是 Cookie 的关键安全属性之一，它定义了跨站请求时浏览器是否应携带 Cookie。

值 含义 是否允许跨域发送

Strict 仅限同站请求携带 Cookie ❌ 不允许跨域 Lax 默认值，部分跨站（如 GET 表单跳转）可携带 ⚠️ 部分允许 None 不限制，同意跨域发送 Cookie ✅ 允许跨域

#注意：

要让 Cookie 支持跨域发送：

复制Set-Cookie: token=abc123; SameSite=None; Secure

必须同时设置： - SameSite=None - Secure（即必须是 HTTPS）

否则 Chrome 等现代浏览器会直接丢弃该 Cookie。

#五、CORS 与 Cookie 的关系

跨域 Cookie 的传递不仅取决于 Cookie 本身，还取决于服务端的 CORS（跨域资源共享） 设置。

#服务端需要设置：

复制Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Credentials: true

注意： - 不能使用 Access-Control-Allow-Origin: * - 必须指定确切域名 - 必须加上 Access-Control-Allow-Credentials: true

否则即使前端 credentials: 'include'，浏览器也不会发送 Cookie。

#六、完整示例

#前端代码（frontend.com）：

复制fetch('https://api.backend.com/user', {
  method: 'GET',
  credentials: 'include',
});

#后端响应（api.backend.com）：

复制HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Credentials: true
Set-Cookie: token=abc123; Path=/; Domain=backend.com; SameSite=None; Secure
Content-Type: application/json

{"user":"hua"}

#效果

此时浏览器会正确保存并在后续请求中携带 token Cookie。

#七、常见问题与排查技巧

#1. Cookie 没有写入？

• 检查是否是 HTTPS 环境（Secure 属性）
• 确认 SameSite=None
• 检查响应头是否包含正确的 Access-Control-Allow-Origin

#2. Cookie 写入了但请求不携带？

• 前端请求缺少 credentials: 'include'
• Cookie 的 Domain 不匹配请求域名
• CORS 没有设置 Access-Control-Allow-Credentials: true

#3. 子域共享问题

例如 api.example.com 与 www.example.com：

复制Set-Cookie: session_id=abc; Domain=.example.com; Path=/;

这样可以在所有子域间共享 Cookie。

#八、安全建议

1. 不要在前端操作敏感 Cookie，始终加上 HttpOnly\
2. 跨域写 Cookie 时启用 HTTPS，保证传输安全\
3. 合理使用 SameSite 属性，避免被第三方滥用\
4. 谨慎使用通配符域名，防止子域被攻击者滥用

#九、总结

目的 前端配置 后端配置 Cookie 配置

跨域请求携带 credentials: 'include' Access-Control-Allow-Origin + SameSite=None; Secure Cookie Allow-Credentials

#同站 Cookie 无需额外配置 无需 CORS 默认 Lax 即可 传输

#✅ 一句话总结

若要让 Cookie 在跨域请求中生效，必须同时满足： - 前端：credentials: 'include' - 后端：Access-Control-Allow-Origin 精确匹配 + Allow-Credentials: true - Cookie：SameSite=None; Secure