跨域问题解析（下）：Nginx代理、domain修改与postMessage解决方案

4. Nginx代理解决方案

核心原理

Nginx代理是生产环境最常用的跨域解决方案，其本质是通过反向代理将不同源的请求转化为同源请求。Nginx作为中间服务器接收前端请求，然后代为转发到目标服务器，最后将响应返回给前端。

这个方法是项目上线时用的，我们主要了解就行

优势特点

生产环境首选方案
高性能，低开销
可结合负载均衡使用
配置灵活，支持多种代理规则

5. domain修改方案

核心原理

当父页面与iframe子页面具有相同基础域名但子域名不同时（如a.example.com和b.example.com），可以通过设置document.domain = 'example.com'将两者的源提升到相同级别，从而实现跨域通信。

关键实现代码

父页面(parent.yourdomain.com)

html 复制代码

<iframe src="http://child.yourdomain.com"></iframe>
<script>
    document.domain = 'yourdomain.com';  // 设置基础域名
    // 现在可以访问iframe内容了
    const iframeDoc = document.getElementsByTagName('iframe')[0].contentDocument;
</script>

子页面(child.yourdomain.com)

javascript 复制代码

document.domain = 'yourdomain.com';  // 必须与父页面设置相同
// 现在可以通过parent访问父窗口
console.log(parent.document.title);

适用场景

仅限于具有相同基础域名的跨子域通信
需要同时修改父子页面的domain属性
现代Web应用中使用较少

6. postMessage通信方案

核心原理

postMessage提供了一种安全的跨源通信机制，允许来自不同源的窗口/iframe之间进行双向通信。通过指定目标窗口和严格的目标origin验证，确保通信安全性。

关键实现代码

发送方窗口

javascript 复制代码

// 获取目标iframe的contentWindow
const iframeWindow = document.getElementById('myIframe').contentWindow;

// 发送消息
iframeWindow.postMessage(
    { key: 'value' },  // 消息内容
    'http://target-domain.com'  // 目标origin
);

接收方窗口

javascript 复制代码

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修改