4. Nginx代理解决方案
核心原理
Nginx代理是生产环境最常用的跨域解决方案，其本质是通过反向代理将不同源的请求转化为同源请求。Nginx作为中间服务器接收前端请求，然后代为转发到目标服务器，最后将响应返回给前端。
这个方法是项目上线时用的，我们主要了解就行
优势特点
- 生产环境首选方案
- 高性能，低开销
- 可结合负载均衡使用
- 配置灵活，支持多种代理规则
5. domain修改方案
核心原理
当父页面与iframe子页面具有相同基础域名但子域名不同时（如a.example.com和b.example.com），可以通过设置document.domain = 'example.com'将两者的源提升到相同级别，从而实现跨域通信。
关键实现代码
父页面(parent.yourdomain.com)
<iframe src="http://child.yourdomain.com"></iframe>
<script>
document.domain = 'yourdomain.com'; // 设置基础域名
// 现在可以访问iframe内容了
const iframeDoc = document.getElementsByTagName('iframe')[0].contentDocument;
</script>
子页面(child.yourdomain.com)
document.domain = 'yourdomain.com'; // 必须与父页面设置相同
// 现在可以通过parent访问父窗口
console.log(parent.document.title);
适用场景
- 仅限于具有相同基础域名的跨子域通信
- 需要同时修改父子页面的domain属性
- 现代Web应用中使用较少
6. postMessage通信方案
核心原理
postMessage提供了一种安全的跨源通信机制，允许来自不同源的窗口/iframe之间进行双向通信。通过指定目标窗口和严格的目标origin验证，确保通信安全性。
关键实现代码
发送方窗口
// 获取目标iframe的contentWindow
const iframeWindow = document.getElementById('myIframe').contentWindow;
// 发送消息
iframeWindow.postMessage(
{ key: 'value' }, // 消息内容
'http://target-domain.com' // 目标origin
);
接收方窗口
window.addEventListener('message', (event) => {
// 必须验证消息来源
if (event.origin !== 'http://trusted-domain.com') return;
// 处理接收到的消息
console.log('Received data:', event.data);
// 可选：回复消息
event.source.postMessage('Response', event.origin);
});
优势特点
- 最灵活的跨域通信方案
- 支持任意窗口/iframe间通信
- 严格的origin验证保障安全
- 不受同源策略限制
- 支持结构化克隆算法，可以传输复杂对象
方案对比与选型建议
| 方案 | 适用场景 | 是否需要后端配合 | 安全性 | 复杂度 |
|---|---|---|---|---|
| Nginx代理 | 生产环境API代理 | 需要 | 高 | 中 |
| domain修改 | 同基础域的子域通信 | 不需要 | 中 | 低 |
| postMessage | 跨窗口通信 | 不需要 | 高 | 中 |
生产环境推荐：优先考虑Nginx反向代理，其次是CORS方案
特殊场景：跨窗口通信使用postMessage，历史遗留系统可考虑domain修改
