处理跨域的方法

Posted 2021-12-02 8023-chd

处理跨域有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），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送。