跨域问题解决方案分析

跨域(CORS, Cross-Origin Resource Sharing)是前端开发中常见的安全限制问题，当请求的协议、域名或端口不同时，浏览器会阻止这种跨域请求。以下是常见的解决方案：

1. 后端解决方案

1.1 CORS响应头设置

// Node.js Express示例
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*"); // 或指定特定域名
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
  next();
});

1.2 代理服务器

• 使用Nginx反向代理：

location /api/ {
  proxy_pass http://backend-server/;
  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
}

2. 前端解决方案

2.1 JSONP (仅限GET请求)

function jsonp(url, callbackName, callback) {
  const script = document.createElement('script');
  script.src = `${url}?callback=${callbackName}`;
  window[callbackName] = callback;
  document.body.appendChild(script);
}

2.2 开发环境代理

• Webpack配置：

// webpack.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://target-server.com',
        changeOrigin: true,
        pathRewrite: {'^/api': ''}
      }
    }
  }
}

3. 其他解决方案

3.1 使用WebSocket

WebSocket协议不受同源策略限制

3.2 跨文档消息API (postMessage)

// 发送方
window.postMessage('message', 'https://target-domain.com');

// 接收方
window.addEventListener('message', event => {
  if (event.origin !== 'https://source-domain.com') return;
  console.log(event.data);
});

最佳实践建议

1. 生产环境：优先使用后端CORS配置，限制为特定可信域名而非"*"
2. 开发环境：使用代理服务器或开发服务器代理功能
3. 敏感操作：确保配置正确的Access-Control-Allow-Credentials和withCredentials
4. 预检请求：对于复杂请求，确保正确处理OPTIONS方法

选择哪种方案取决于您的具体应用场景、安全需求和基础设施配置。