如何解决JavaScript跨域的问题

小编给大家分享一下如何解决JavaScript跨域的问题，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

创新互联公司专注于网站建设|成都网站维护|优化|托管以及网络推广，积累了大量的网站设计与制作经验，为许多企业提供了网站定制设计服务，案例作品覆盖成都木制凉亭等行业。能根据企业所处的行业与销售的产品，结合品牌形象的塑造，量身策划品质网站。

同源政策：协议、域名、端口均相同。

非同源限制：

cookie、localStorage、indexDB无法读取。

DOM无法获取。

AJAX请求无法发送。

解决方式：

一、JSONP

原理：通过动态添加一个

页面二："https://www.example.com/page2.html"    //接收页面

事件接收window.addEventListener('message', function(){});中的message事件对象event有三个属性：
1、event.source：发送消息的窗口
2、event.origin: 消息发向的网址
3、event.data: 消息内容

三、iframe

iframe载入页面和src里面的目标域是同一个域，是能够发起ajax请求（父子窗口）。   //前提是同源，不同源就不可以发起ajax请求。

不同窗口同源之间是可以获取window对象，但是不能获取window对象的属性和方法。   //不同源会报错

1、document.domain + iframe（同源可用 -- 跨子域）

document.domain属性：一级域名相同，二级域名不同可以实现window对象获取。

页面一："https://segmentfault.com/page1.html"

页面二："https://segmentfault.com/page2.html"

缺陷：主域名得一致。

2、window.name + iframe（非同源可用）

window.name属性：在一个窗口的生命周期内，无论是否同源，同一个窗口的载入页面window.name属性是共享的，每个页面都可以操作。

页面一："https://segmentfault.com/page1.html"

页面二："https://segmentfault.com/page2.html"

缺陷：兼容性不好

3、location.hash + iframe（非同源可用）

片段标识符：片段标识符是指url#号后面的部分。只是改变片段标识符页面不刷新。

页面一："https://www.segmentfault.com/page1.html"

页面二："https://www.example.com/page2.html#messgae"

页面三："ttps:/www.segmentfault.com/page3html#somedata"

缺点：数据暴露在url，长度也有限制。

四、WebSocket

WebSocket：浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

设置WebSocket请求头信息，服务器支持就可以进行。

Origin: http://example.com        //根据域名是否在白名单内来判断是否可以通信

缺点：实现成本高。

五、CORS

cors是跨域资源分享。现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

缺点：服务器配置，占用主域带宽。

看完了这篇文章，相信你对如何解决JavaScript跨域的问题有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！