zoukankan      html  css  js  c++  java
  • CORS 和 JSONP

    跨域资源共享(CORS)

    它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制

    CORS(Cross-Origin Resource Sharing)跨域资源共享,定义了必须在访问跨域资源时,浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败。

    整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,

    (Origin:http://www.ajdf.com:80  包括请求页面的源信息:协议 域名 端口号)有时还会多出一次附加的请求,但用户不会有感觉。

    因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。服务器根据这个头部信息来决定是否给予响应。

    如果服务器认为这个请求可以接受,就设置设置Access-Control-Allow-Origin设置与请求相同的 源信息或者 *

    如果没有这个头部,或者有这个头部但源信息不匹配,浏览器就驳回(撤销?)请求。

    注:请求和响应中都不包含cookie信息

    <script type="text/javascript">
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/ccd",true);
        xhr.send();
    </script>

    以上的ccd是相对路径,如果我们要使用CORS,相关Ajax代码可能如下所示:

    <script type="text/javascript">
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "http://segmentfault.com/u/ccd/",true);
        xhr.send();
    </script>

     

    代码与之前的区别就在于相对路径换成了其他域的绝对路径,也就是你要跨域访问的接口地址。

    服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。


     

     

    要解决跨域的问题,我们可以使用以下几种方法:

    通过jsonp跨域

    现在问题来了?什么是jsonp?维基百科的定义是:JSONP(JSON with Padding)是资料格式 JSON 的一种“使用模式”,可以让网页从别的网域要资料。

    JSONP也叫填充式JSON,是应用JSON的一种新方法,只不过是被包含在函数调用中的JSON,例如:

    callback({"name","trigkit4"});
     

    JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数中的JSON数据。

    在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的。但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的。 例如:

    <script type="text/javascript">
        function dosomething(jsondata){
            //处理获得的json数据
        }
    </script>
    <script src="http://example.com/data.php?callback=dosomething"></script>

     

    js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。

    <?php
    $callback = $_GET['callback'];//得到回调函数名
    $data = array('a','b','c');//要返回的数据
    echo $callback.'('.json_encode($data).')';//输出
    ?>

     

    最终,输出结果为:dosomething(['a','b','c']);

    如果你的页面使用jquery,那么通过它封装的方法就能很方便的来进行jsonp操作了。

    <script type="text/javascript">
        $.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){
            //处理获得的json数据
        });
    </script>

     

    jquery会自动生成一个全局函数来替换callback=?中的问号,之后获取到数据后又会自动销毁,实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域,不跨域的话,就调用普通的ajax方法;跨域的话,则会以异步加载js文件的形式来调用jsonp的回调函数。

    JSONP的优缺点

    JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。

    JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

    CORS和JSONP对比

    CORS与JSONP相比,无疑更为先进、方便和可靠。

     
        1、 JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。
    
        2、 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。
    
        3、 JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS)。
  • 相关阅读:
    11.文件操作
    10.模块和包
    9.异常
    8.单例模式
    7.类属性、类方法、静态方法
    小学口算题卡---田青正
    个人技术流程(四则运算)--马伟杰
    个人开发流程(四则运算)--张文龙
    个人技术流程(四则运算)--王潮玉
    个人技术流程(四则运算)--毛明明
  • 原文地址:https://www.cnblogs.com/chengdabelief/p/6685446.html
Copyright © 2011-2022 走看看