处理跨域的方法

处理跨域有4中方法分别是: JSONP、CORS、WebSocket、PostMessage

一·首先介绍一下JSONP原理

        JSONP是利用<script>标签的开放策略,网页可以得到从其他来源动态产生的json数据,JSONP请求一定需要对法国的服务器做支持才可以。

优点:兼容性好 可用于解决主流浏览器的跨域数据访问的问题。

缺点:仅支持get请求,有局限性;

 jQuery的jsonp形式

JSONP都是GET和异步请求的,不存在其他的请求方式和同步请求,且jQuery默认就会给JSONP的请求清除缓存。

1 $.ajax({ url:"http://crossdomain.com/jsonServerResponse", dataType:"jsonp", type:"get",//可以省略 jsonpCallback:"fn",//->自定义传递给服务器的函数名,而不是使用jQuery自动生成的,可省略 jsonp:"jsonp",//->把传递函数名的那个形参callback变为jsonp,可省略 success:function (data){ console.log(data);} });

二·CORS原理

        整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信

优点:功能更加强大,支持各种HTTP Method。

缺点:兼容性不如JSONP

CORS要求浏览器(>IE10)和服务器的同时支持,是跨域的根本解决方法.

三·WebSocket

       Websocket是HTML5的一个持久化的协议,它实现了浏览器与服务器的全双工通信,同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议,都基于 TCP 协议。但是 WebSocket 是一种双向通信协议,在建立连接之后,WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时,WebSocket 在建立连接时需要借助 HTTP 协议,连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。

四·postMessage

         如果两个网页不同源,就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口,它们与父窗口无法通信。HTML5为了解决这个问题,引入了一个全新的API:跨文档通信 API(Cross-document messaging)。这个API为window对象新增了一个window.postMessage方法,允许跨窗口通信,不论这两个窗口是否同源。postMessage方法的第一个参数是具体的信息内容,第二个参数是接收消息的窗口的源(origin),即"协议 + 域名 + 端口"。也可以设为*,表示不限制域名,向所有窗口发送。

原文地址:https://www.cnblogs.com/8023-CHD/p/10896888.html