zoukankan      html  css  js  c++  java
  • 处理跨域的方法

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

  • 相关阅读:
    权值线段树模版
    P2679 [NOIP2015 提高组] 子串
    P3747 [六省联考 2017] 相逢是问候
    P2822 [NOIP2016 提高组] 组合数问题
    P2331 [SCOI2005]最大子矩阵
    P1854 花店橱窗布置
    P5888 传球游戏
    Hard | LeetCode 42. 接雨水 | 单调栈 | 双指针
    Medium | LeetCode 621. 任务调度器 | 设计
    Medium | LeetCode 166. 分数到小数 | 数学
  • 原文地址:https://www.cnblogs.com/8023-CHD/p/10896888.html
Copyright © 2011-2022 走看看