跨域请求解决方案及详解

1，CORS（跨域资源共享）

优点

CORS 通信与同源的 AJAX 通信没有差别，代码完全一样，容易维护。
支持所有类型的 HTTP 请求。
缺点

存在兼容性问题，特别是 IE10 以下的浏览器。
第一次发送非简单请求时会多一次请求。

2，JSONP 跨域

优点

使用简便，没有兼容性问题，目前最流行的一种跨域方法。
缺点

只支持 GET 请求。
由于是从其它域中加载代码执行，因此如果其他域不安全，很可能会在响应中夹带一些恶意代码。
要确定 JSONP 请求是否失败并不容易。虽然 HTML5 给 script 标签新增了一个 onerror 事件处理程序，但是存在兼容性问题。

3，图片Ping 跨域

优点

用于实现跟踪用户点击页面或动态广告曝光次数有较大的优势。
缺点

只支持 GET 请求。
无法访问服务器的响应文本（单向请求）

4，服务器代理

万能

浏览器有跨域限制，但是服务器不存在跨域问题，所以可以由服务器请求所要域的资源再返回给客户端。

DomainA客户端（浏览器） ==> DomainA服务器 ==> DomainB服务器 ==> DomainA客户端（浏览器）

5，修改 document.domain 跨子域

对于主域名相同，且协议，端口一致，而子域名不同的情况，可以使用 document.domain 来跨域。

6，window.name+iframe

iframe标签的跨域能力
window.name属性值在文档刷新后依旧存在的能力（且最大允许2M左右）
​ window.name 通过在 iframe（一般动态创建i）中加载跨域HTML文件来起作用。然后，HTML文件将传递给请求者的字符串内容赋值给 window.name 然后，请求者可以检索window.name值作为响应。

7，location.hash 跨域

location.hash 方式跨域，是子框架具有修改父框架 src 的 hash 值，通过这个属性进行传递数据，且更改 hash 值，页面不会刷新。但是传递的数据的字节数是有限的。

8，window.postMessage()

window.postMessage(message，targetOrigin) 方法是HTML5新特性，可以用来向其他所有的 window 对象发送消息。

需要注意的是我们必须要保证所有的脚本执行完才发送 MessageEvent，如果在函数执行的过程中调用了它，就会让后面的函数超时无法执行。

也许是以后解决 dom 跨域通用方法。

9，WebSocket

WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很棒的实现。相关文章，请检索：WebSocket、WebSocket-SockJS

更多详解请参考
浏览器同源策略及跨域的解决方法

https://blog.csdn.net/ligang2585116/article/details/73072868

八种方式实现跨域请求

https://www.cnblogs.com/laixiangran/p/9064769.html

前端常见跨域解决方案（全）
https://segmentfault.com/a/1190000011145364?tdsourcetag=s_pcqq_aiomsg