前端跨域解决方案

什么是跨域？

跨域是指浏览器出于安全考虑，限制从一个源（域名、协议、端口）加载的文档或脚本与另一个源的资源进行交互的行为。当协议、域名、端口三者中任意一个与当前页面不同时，即会触发跨域限制。

常见跨域解决方案

1. CORS（跨域资源共享）

原理：后端在响应头中添加 Access-Control-Allow-Origin 等相关字段，允许指定源的请求访问资源。
实现方式：

• 简单请求：后端设置 Access-Control-Allow-Origin: *（允许所有源）或指定具体域名
• 复杂请求（带预检请求）：后端需额外处理 OPTIONS 请求，设置 Access-Control-Allow-Methods、Access-Control-Allow-Headers 等

优点：标准解决方案，安全性高，支持所有 HTTP 方法
缺点：需后端配合修改，不兼容旧浏览器（IE10+支持）

2. JSONP

原理：利用 <script> 标签不受同源策略限制的特性，通过动态创建 script 标签加载跨域脚本，脚本回调函数携带数据返回。
实现方式：

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

优点：兼容性好（支持所有浏览器）
缺点：仅支持 GET 请求，存在安全风险（XSS 攻击），需前后端约定回调函数名

3. 代理服务器

原理：通过同源服务器转发跨域请求，将跨域请求转化为同源请求。
实现方式：

• 开发环境：使用 webpack-dev-server、vite 等工具配置代理

  // webpack.config.js 示例
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        pathRewrite: {'^/api': ''}
      }
    }
  }
  

• 生产环境：使用 Nginx、Apache 等服务器配置反向代理

优点：前端无需修改代码，支持所有请求方式，安全性高
缺点：需额外配置服务器，增加服务器负担

4. document.domain + iframe

原理：当主域名相同，子域名不同时，通过设置 document.domain 为相同的主域名，实现同域通信。
实现方式：

// 父页面 (a.example.com)
document.domain = 'example.com';
const iframe = document.getElementById('myIframe');
console.log(iframe.contentWindow.data);

// iframe 页面 (b.example.com)
document.domain = 'example.com';
window.data = '跨域数据';

优点：简单易用，适用于主域名相同的场景
缺点：仅限主域名相同的跨域场景，不支持完全不同域名

5. window.postMessage

原理：HTML5 新增 API，允许不同源的窗口/iframe 之间通过消息传递数据。
实现方式：

// 发送方
const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello', 'https://target-domain.com');

// 接收方
window.addEventListener('message', (event) => {
  if (event.origin === 'https://source-domain.com') {
    console.log('接收到消息:', event.data);
    event.source.postMessage('回复消息', event.origin);
  }
});

优点：支持任意源之间通信，可传递复杂数据，安全性可控
缺点：需手动验证消息来源，IE8+ 部分支持，IE10+ 完全支持

6. WebSocket

原理：WebSocket 协议不受同源策略限制，通过建立持久连接实现全双工通信。
实现方式：

const ws = new WebSocket('wss://api.example.com/ws');
ws.onopen = () => {
  ws.send('连接已建立');
};
ws.onmessage = (event) => {
  console.log('WebSocket 消息:', event.data);
};

优点：实时性好，支持双向通信，不受同源限制
缺点：需后端支持 WebSocket 协议，不适合简单数据请求

解决方案选择建议

1. 优先推荐：CORS（标准方案，安全性高）、代理服务器（前后端分离常用）
2. 兼容性需求：JSONP（旧浏览器支持）
3. 页面间通信：window.postMessage（跨窗口/iframe）、document.domain（主域名相同）
4. 实时通信：WebSocket（如聊天、实时数据展示）

安全性注意事项

• 避免使用 Access-Control-Allow-Origin: * 生产环境，应指定具体域名
• JSONP 需验证回调函数名，过滤非法字符
• postMessage 必须验证 event.origin，防止恶意网站攻击
• 敏感数据传输需配合 HTTPS 加密