跨域问题全解析：5种主流技术方案与工程实践指南

一、CORS：现代Web开发的跨域标准方案

跨域资源共享（CORS）通过服务器端响应头声明允许的跨域请求来源，已成为当前最主流的解决方案。其核心机制包含两类请求处理：

1. 简单请求处理
满足以下条件的请求会被浏览器直接发送：

方法：GET/POST/HEAD
头部：仅包含Accept/Accept-Language/Content-Language/Content-Type等安全字段
内容类型：application/x-www-form-urlencoded/multipart/form-data/text/plain

服务器需设置关键响应头：

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

2. 预检请求（Preflight）处理
对于PUT/DELETE等非简单请求，浏览器会先发送OPTIONS请求进行协商。服务器需正确处理：

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

安全注意事项：

避免使用Access-Control-Allow-Origin: *处理敏感请求
凭证请求需同时设置Access-Control-Allow-Credentials: true和具体域名
生产环境建议配置白名单机制而非通配符

二、JSONP：传统方案的遗留价值

虽然JSONP仅支持GET请求且存在XSS风险，但在以下场景仍有应用价值：

兼容老旧浏览器（如IE8及以下）
调用不支持CORS的第三方API
快速实现简单数据获取

实现原理：

<!-- 前端定义回调函数 -->
<script>
function handleData(response) {
  console.log('Received:', response);
}
</script>
<!-- 动态创建script标签 -->
<script src="https://api.example.com/data?callback=handleData"></script>

服务器端响应示例：

// Express路由处理
app.get('/data', (req, res) => {
  const callback = req.query.callback;
  res.type('application/javascript');
  res.send(`${callback}({ "status": "success", "data": [...] })`);
});

安全增强建议：

验证callback参数是否符合命名规范
限制响应数据大小
避免在JSONP接口暴露敏感操作

三、WebSocket：全双工跨域通信

WebSocket协议通过HTTP握手升级机制天然支持跨域，特别适合实时通信场景：

客户端实现：

const socket = new WebSocket('wss://secure-api.example.com/ws');
socket.onopen = () => {
  socket.send(JSON.stringify({ type: 'auth', token: 'xxx' }));
};
socket.onmessage = (event) => {
  const data = JSON.parse(event.data);
  if (data.type === 'notification') {
    renderNotification(data.payload);
  }
};

服务器端关键配置：

// 某常见Node.js WebSocket库配置
const server = new WebSocket.Server({
  port: 8080,
  path: '/ws',
  verifyClient: (info) => {
    // 验证Origin头
    const origin = info.origin;
    return allowedOrigins.includes(origin);
  }
});

性能优化建议：

使用wss://协议保障传输安全
实现心跳机制检测连接状态
合理设置消息大小限制

四、代理服务器：企业级解决方案

通过服务端转发请求可彻底绕过浏览器限制，分为开发代理和生产代理两种模式：

1. 开发环境代理配置

// Vite配置示例
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://internal-service:8000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
}

2. 生产环境Nginx配置

location /api/ {
  proxy_pass http://backend-cluster/;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  # WebSocket支持
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
}

架构优势：

统一管理跨域策略
实现请求熔断/限流
方便集成身份认证
隐藏内部服务细节

五、postMessage：跨窗口安全通信

适用于iframe嵌套、多标签页等场景的跨域通信：

安全通信实践：

// 父窗口发送消息
const iframe = document.getElementById('child-frame');
iframe.contentWindow.postMessage({
  type: 'init',
  payload: { userId: 123 }
}, 'https://child-domain.com');
// 子窗口接收处理
window.addEventListener('message', (event) => {
  // 严格验证来源和消息结构
  if (event.origin !== 'https://parent-domain.com') return;
  try {
    const data = event.data;
    if (data.type === 'init') {
      initializeApp(data.payload);
    }
  } catch (e) {
    console.error('Message parsing error:', e);
  }
});

安全要点：

始终验证event.origin
约定明确的消息格式
避免传递敏感函数引用
考虑使用Symbol作为消息类型标识

六、方案选型决策树

是否需要双向通信？
- 是 → WebSocket
- 否 → 继续评估
是否控制服务端？
- 是 → 优先CORS或代理
- 否 → 考虑JSONP或postMessage
是否涉及敏感数据？
- 是 → 必须使用CORS+凭证或代理
- 否 → 可考虑简化方案
是否需要实时性？
- 是 → WebSocket
- 否 → 常规HTTP方案

七、安全最佳实践

实施严格的CORS策略，避免过度开放
所有跨域通信必须使用HTTPS
对JSONP回调函数进行严格校验
代理服务器实现请求日志记录
定期审计跨域访问权限

通过合理选择和组合这些技术方案，开发者可以构建既安全又高效的跨域通信体系。在实际项目中，建议根据具体场景进行方案组合，例如使用CORS处理常规API请求，WebSocket实现实时通信，代理服务器统一管理跨域策略，形成多层次的防御体系。