Cookie 在跨域场景下如何使用？需要注意哪些问题？ - 面试题

Cookie 在跨域场景下的使用需要特别注意，因为浏览器的同源策略会限制 Cookie 的访问和发送。

同源策略与 Cookie

Cookie 默认只在同源请求中发送
同源：相同协议、域名和端口

跨域 Cookie 设置

通过 Domain 属性

javascript
// 在父域名设置 Cookie，子域名可访问
document.cookie = "token=xyz; Domain=.example.com; Path=/";

设置 Domain 为 .example.com，所有子域名都能访问
注意：Domain 必须是当前域名的父域名或相同域名

跨域请求携带 Cookie

javascript
// 前端设置
fetch('https://api.example.com/data', {
  credentials: 'include'  // 或 'same-origin'
});

// 或使用 XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open('GET', 'https://api.example.com/data');
xhr.send();

服务器端配置

javascript
// Express.js 示例
app.use(cors({
  origin: 'https://frontend.example.com',
  credentials: true  // 允许携带 Cookie
}));

// 设置 Cookie 时指定 SameSite
res.setHeader('Set-Cookie', [
  'token=xyz; HttpOnly; Secure; SameSite=None'
]);

CORS 与 Cookie 的关系

必须设置 credentials: 'include'
服务器必须设置 Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin 不能是 *，必须是具体域名

第三方 Cookie 限制

Chrome、Firefox 等浏览器逐步限制第三方 Cookie
Safari 已默认阻止第三方 Cookie
解决方案：使用 SameSite=None; Secure

使用场景

单点登录（SSO）
跨域 API 认证
第三方登录（OAuth）

安全注意事项

跨域 Cookie 必须使用 Secure 标志
验证 Origin 和 Referer 头
使用 CSRF Token 提供额外防护
设置合理的过期时间