一、跨域问题本质与安全机制

浏览器同源策略（Same-Origin Policy）是Web安全的核心防线，其通过限制协议、域名、端口三要素完全相同的资源交互，有效防范XSS、CSRF等攻击。当开发者尝试通过AJax请求不同源接口时，浏览器会拦截响应并抛出跨域错误。理解这一机制是解决跨域问题的前提。

二、CORS（跨域资源共享）方案详解

作为W3C标准方案，CORS通过服务器响应头声明允许的跨域请求来源，支持简单请求和预检请求两种模式：

1. 简单请求配置

当满足以下条件时触发简单请求：

方法为GET/POST/HEAD
仅包含安全首部（如Accept、Content-Type等）
Content-Type为特定值之一

服务器响应头配置示例：

// Node.js Express示例
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'https://your-domain.com');
  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Authorization');
  next();
});

2. 预检请求处理

非简单请求（如PUT方法或自定义首部）会先发送OPTIONS预检请求。服务器需正确响应：

// 处理预检请求的中间件
app.options('*', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'https://your-domain.com');
  res.setHeader('Access-Control-Allow-Methods', 'PUT,DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'X-Custom-Header');
  res.setHeader('Access-Control-Max-Age', '86400'); // 缓存24小时
  res.sendStatus(200);
});

3. 凭证模式配置

当需要传输Cookie等凭证时，需同时配置：

// 客户端设置
fetch('https://api.example.com/data', {
  credentials: 'include' // 必须包含此选项
});
// 服务端响应
res.setHeader('Access-Control-Allow-Credentials', 'true');
// 注意：此时Allow-Origin不能为*，必须指定具体域名

三、JSONP方案与现代替代方案

1. 传统JSONP实现

利用<script>标签不受同源策略限制的特性，通过动态创建script标签实现跨域：

function handleResponse(data) {
  console.log('Received:', data);
}
const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

2. 现代替代方案

JSONP存在安全风险（仅支持GET请求、易受XSS攻击），推荐使用：

CORS方案（更安全灵活）
服务器端代理（见后文反向代理方案）

四、WebSocket全双工通信方案

WebSocket协议在设计之初就支持跨域通信，其握手阶段通过HTTP升级请求协商连接参数：

// 客户端实现
const socket = new WebSocket('wss://api.example.com/ws');
socket.onopen = () => console.log('Connection established');
socket.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Received:', data);
};
// 服务端配置（以某常见框架为例）
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
  ws.send(JSON.stringify({ message: 'Hello from server' }));
});

五、反向代理解决方案

1. 开发环境代理配置

通过配置开发服务器的代理规则，将跨域请求转发到目标服务：

// vite.config.js 示例
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://backend-service.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
}

2. 生产环境Nginx配置

server {
    listen 80;
    server_name frontend.example.com;
    location /api/ {
        proxy_pass http://backend-service.com/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

六、跨窗口通信方案

1. postMessage API

实现不同窗口间的安全通信：

// 发送方（iframe内）
window.parent.postMessage(
  { type: 'AUTH_TOKEN', payload: 'abc123' },
  'https://parent-domain.com' // 目标源，*表示任意源（不推荐）
);
// 接收方（父页面）
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://child-domain.com') return;
  switch (event.data.type) {
    case 'AUTH_TOKEN':
      console.log('Received token:', event.data.payload);
      break;
  }
});

2. document.domain方案（限同级域名）

适用于主域名相同但子域名不同的场景：

// parent.example.com 和 child.example.com
document.domain = 'example.com'; // 双方都需设置

七、方案选型建议

方案	适用场景	安全等级	复杂度
CORS	现代前后端分离架构	高	中
WebSocket	实时通信应用（聊天、股票行情等）	高	高
反向代理	企业级微服务架构	高	中
postMessage	跨域iframe通信	高	低
JSONP	遗留系统兼容（不推荐新项目使用）	低	低

八、安全最佳实践

严格限制允许的源（避免使用*）
对预检请求进行缓存（减少OPTIONS请求）
验证所有接收到的消息来源（postMessage场景）
使用HTTPS保障通信安全
避免在跨域请求中传输敏感数据

通过系统掌握这些解决方案，开发者可以灵活应对各种跨域场景，在保障安全性的前提下实现高效的跨域通信。实际项目中，建议优先采用CORS或反向代理方案，对于实时性要求高的场景可考虑WebSocket，而跨窗口通信则应使用postMessage API。

跨域问题深度解析：六种主流解决方案全攻略