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