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

为什么会跨域？跨域是谁附加的限制？为什么 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

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

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

复制代码

2、反向代理

原理就是前端请求同源服务器，由同源服务器向跨域目标发起请求，再由同源服务器返回结果给前端。绕过了浏览器同源策略，但需要服务器支持，如果请求量太大，对自己的服务器要求很高。
比如 nginx / node 中间件 / 开发环境的 dev-server 都是这种方式，以 nginx 跨域配置为例：

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

复制代码

3、WebSocket

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

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

复制代码

4、JSONP

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

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

复制代码

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

1. handleResponse({ data: 'hello' });

复制代码

5、postMessage

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

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

复制代码

接收者：

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

复制代码

不推荐的方案

浏览器的版本升级后，一些老旧的跨域方案被弃用，比如：
6、document.domain + iframe

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

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

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

复制代码

流程图：

目前项目开发基本上已经不在使用这种方式，毕竟绕来绕去的，还不如一个 postMessage 跨域方案简单。
8、location.hash + iframe

通过修改 URL Hash 实现父子 iframe 间单向数据传输，虽然勉强也能算作一种跨域方案，但由于 URL 的长度限制，数据量也不能太大，实际使用中也不简单，所以项目上也很难见到它的身影~~
流程图：

写在最后

除了文章中这 8 种跨域方案外，还有一些单向数据通信的方法，比如说：
1、使用 Fetch API 的 no-cors 模式。
2、利用图片的 src 属性发起 GET 请求。
3、使用 sendBeacon 发送分析数据。
这些方法都只能向服务器发送数据，没办法获得服务器的响应，所以一般多用于一些数据统计，比如：百度统计、谷歌分析等等。
当然也有一些歪门邪道，比如说：修改浏览器的配置允许跨域，编写浏览器插件支持跨域等等。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！