跨域是是因为浏览器的同源策略限制,是浏览器的一种安全机制,服务端之间是不存在跨域的。
同源策略:
- 协议相同
- 域名相同
- 端口相同
同源策略目的:保证用户信息安全,防止恶意网站窃取数据。同源策略是必须的,否则cookie可以共享。
设置document.domain共享cookie。
(父子页面通信)H5引入了一个API,这个API为windows对象新增了一个window.postMessage方法,允许跨窗口通信,无论这两个窗口是否同源。
JSONP是服务器无客户端跨源通信的常用方法。基本思想是网页通过添加一个标签,向服务器请求json数据,这种做法不受同源政策的限制,服务器收到请求后,将数据放在一个指定名字的回调函数里面传回来。(只能发GET请求)</p>
WebSocket是一种通信协议。使用ws://(非加密)和wss://(加密)作为协议前缀。该协议不实行同源政策,只要服务器支持,就可以通过它进行跨源通信。
CORS需要浏览器和服务器同时支持。目前所有浏览器都支持该功能,IE浏览器不能低于IE10。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
使用代理方式跨域更加直接,因为同源限制是浏览器实现的。如果请求不是从浏览器发起的,就不存在跨域问题了:
- 把访问其它域的请求替换为本域的请求;
- 服务器端的动态脚本负责将本域的请求转发成实际的请求;
- 为了通过Ajax从http://localhost:8080访问http://localhost:8081/api,可以将请求发往http://localhost:8080/api;
- 然后利用Apache Web/Nginx 服务器的Reverse Proxy功能做如下配置:ProxyPass /api http://localhost:8081/api。
此方法只能在辅助域名相同时使用,例如a.test COM和b.test Com适用于此方法。您只需要添加文档即可。XML 到页面域 =’test。“com”是指如果辅助域名相同,可以实现跨域。
实现原则:如果a想跨域与b通信,则通过中间页c实现。三个页面,使用iframe位置在不同域之间散列值转移,直接js访问相同的字段之间进行通信。
具体实现方式:域a:a.html->域B:b.html->域a:c.html。A和B的不同域只能通过哈希值进行一种方式通信,而B和C的不同域只能通过一种方式进行通信,但C和A位于同一域中,因此C可以通过父级进行通信 父级访问页面上的所有对象。
window.name属性的独特之处:name值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。
通过iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。
中间代理页,与a.html同域,内容为空即可。
postMessage是HTML5 XMLHttpRequest Level 2中的API,且是为数不多可以跨域操作的window属性之一,它可用于解决以下方面的问题:
- 页面和其打开的新窗口的数据传递
- 多窗口之间消息传递
- 页面与嵌套的iframe消息传递
- 上面三个场景的跨域数据传递
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/bian-cheng-ri-ji/76258.html