多子域Cookie和AJAX问题解析

基础概念

Cookie的作用域

Cookie的作用域由Domain和Path属性决定。当设置Cookie时，可以指定Domain属性来控制哪些子域可以访问该Cookie。

AJAX跨域限制

由于同源策略(Same-Origin Policy)的限制，浏览器默认禁止跨域AJAX请求，包括不同子域之间的请求。

多子域Cookie问题

问题表现

• 主域设置的Cookie在子域不可见
• 子域设置的Cookie在其他子域或主域不可见
• 跨子域请求时Cookie未自动携带

解决方案

1. 设置Cookie的Domain属性：
2. 设置Cookie的Domain属性：
3. 服务器端设置：
4. 服务器端设置：
5. 前端处理：
6. 前端处理：

跨子域AJAX问题

问题表现

• 子域A无法向子域B发送AJAX请求
• 即使设置了跨域Cookie，请求仍被拒绝
• 预检(OPTIONS)请求失败

解决方案

1. CORS配置：
2. CORS配置：
3. 前端AJAX设置：
4. 前端AJAX设置：
5. JSONP方案(仅限GET请求)：
6. JSONP方案(仅限GET请求)：

综合解决方案示例

后端(Node.js)示例

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
  origin: /\.example\.com$/, // 允许所有子域
  credentials: true
}));

app.get('/set-cookie', (req, res) => {
  res.cookie('token', 'abc123', {
    domain: '.example.com',
    path: '/',
    httpOnly: true,
    secure: true,
    sameSite: 'None'
  });
  res.send('Cookie set');
});

app.listen(3000);

前端示例

// 设置跨子域Cookie
document.cookie = "user=john; domain=.example.com; path=/; secure";

// 跨子域AJAX请求
fetch('https://api.example.com/data', {
  method: 'GET',
  credentials: 'include',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data));

常见问题排查

1. Cookie不共享：
   • 检查Domain属性是否正确设置为.example.com形式
   • 确保Path属性设置为/
   • 检查Secure和SameSite属性设置

• AJAX请求失败：
  • 确认服务器返回正确的CORS头
  • 前端请求设置credentials: 'include'
  • 检查浏览器控制台是否有CORS错误
• HTTPS要求：
  • 跨域Cookie和CORS通常要求使用HTTPS
  • Secure属性要求Cookie只能通过HTTPS传输

安全注意事项

1. 谨慎设置SameSite=None，确保同时设置Secure
2. 限制CORS的Access-Control-Allow-Origin范围
3. 对敏感Cookie设置HttpOnly属性
4. 定期轮换Cookie值

通过以上方法，可以解决多子域环境下的Cookie共享和AJAX通信问题，同时保证应用的安全性。