Web前端入门第 89 问：总结 8 种跨域通信处理方案

news/2025/10/28 10:56:50/文章来源:https://www.cnblogs.com/linx/p/19171207

为什么会跨域？跨域是谁附加的限制？为什么 APP 不会有跨域问题？

首先跨域问题是由于浏览器的同源策略（Same-Origin Policy）导致的，基本上所有浏览器都有限制，默认情况是不允许跨域访问的！！

APP 的请求不受浏览器的同源策略限制，所以不存在跨域。类似一个服务器像另一个服务器发起请求一样，也不会受跨域影响。

想想一下：如果浏览器没有同源策略限制，A 网站可以随意访问 B 网站内容，那么现在 BAT 这些一线大厂还有护城河吗？所有网站的数据都无隐私可言了，各种钓鱼网站在浏览器中横飞！！那世道...简直太美~~

什么是同源

同源：指的是协议、域名和端口都相同。任意一个不同，都会触发浏览器的同源策略，从而导致跨域。

以 MDM 的一个文档地址为例，看看 URL 不同的组成部分：https://developer.mozilla.org:443/zh-CN/docs/Web/JavaScript?a=b#hash

跨域解决方案

虽然默认情况下浏览器是不允许跨域访问的，但通过一些配置手段，还是能够实现资源共享~~

1、跨域资源共享 CORS

目前主流的跨域共享方案，由服务器配置响应头告诉浏览器是否允许跨域访问：

// 或 * 表示所有源都可以访问
Access-Control-Allow-Origin: https://domain.com
// 允许的方法
Access-Control-Allow-Methods: GET, POST, OPTIONS
// 允许的自定义头
Access-Control-Allow-Headers: Content-Type, Authorization
// 允许携带 Cookie
Access-Control-Allow-Credentials: true

2、反向代理

原理就是前端请求同源服务器，由同源服务器向跨域目标发起请求，再由同源服务器返回结果给前端。绕过了浏览器同源策略，但需要服务器支持，如果请求量太大，对自己的服务器要求很高。

比如 nginx / node 中间件 / 开发环境的 dev-server 都是这种方式，以 nginx 跨域配置为例：

location /api/ {proxy_pass https://domain.com/;  # 需要请求的跨域目标proxy_set_header Host $host;
}

3、WebSocket

WebSocket 是 HTML5 新增的协议，允许浏览器和服务器之间进行全双工通信，天然支持跨域访问。由于是双向通信，所以对服务器压力也不小。

const ws = new WebSocket('wss://domain.com');
ws.onmessage = (event) => console.log(event.data);

4、JSONP

利用 <script> 标签，向目标服务器发起请求，目标服务器需要返回一段函数调用，将数据返回给前端。缺点是仅支持 get 请求，还容易引发 XSS 攻击！

function handleResponse(data) {console.log(data);
}const script = document.createElement('script');
script.src = 'https://domain.com/data?callback=handleResponse';
document.head.appendChild(script);

https://domain.com/data?callback=handleResponse 需要返回 JS 代码调用函数执行：

handleResponse({ data: 'hello' });

5、postMessage

此方式一般多用于 iframe 的跨域通信，比如 A 网页使用 iframe 嵌入 B 网页，这种情况就可以使用 postMessage 通信：

发送者：

// 发送方
iframe.contentWindow.postMessage('data', 'https://target-domain.com');

接收者：

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

不推荐的方案

浏览器的版本升级后，一些老旧的跨域方案被弃用，比如：

6、document.domain + iframe

在过去，如果同一个主域名，子域名不同的情况，比如：a.domain.com 和 b.domain.com 之间进行通信，可以通过设置 document.domain = 'domain.com' 来解决，但现在的浏览器已经限制使用了！！

7、window.name + iframe

此方案有一些复杂，需要一个空白的同源页面用于绕过浏览器的同源策略，然后获取 iframe 的 name 属性值，此处有大小限制，最多 2MB 的数据。

流程：

源页面A (domainA.com) ↓ 创建iframe指向代理页面B (domainB.com)
代理页面B (domainB.com) ↓ 接收数据并存入 window.name↓ 跳转至与A同源的空白页面C (domainA.com)
源页面A ↓ 访问iframe的window.name获取数据

流程图：