JavaScript跨域浅析

最新推荐文章于 2020-02-05 14:49:12 发布

debug_nhz

最新推荐文章于 2020-02-05 14:49:12 发布

阅读量527

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/debug_nhz/article/details/73896528

版权

什么是跨域？

是指从一个域名的网页去请求另一个域名的资源。
严格意义上讲，只要协议、域名、端口有任何一个不同，就被认为是跨域。
注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

产生跨域的原因

跨域是浏览器的同源策略限制，当前域名的js只能读取同域名下的窗口属性。

解决方案

jsonp

jsonp全称是JSON with Padding，是为了解决跨域请求资源而产生的解决方案，是依靠开发人员创造出的一种非官方跨域数据交互协议。浏览器对XHR做了同源策略，但是并没有将这种方式延续到script（还有iframe，img），jsonp就是利用浏览器的script标签不受同源策略限制。
该协议的一个要点是允许用户传递一个callback参数给到服务端。

-jsonp的数据格式是在json的外面包裹一层callback（），因此后台返回的数据需要特殊处理。
-前端请求代码

 $.ajax({  
        type: "get",  
        async: false,  
        url: "http://192.168.2.229:8081/api/web_search_directnew.html",  
        dataType: "jsonp",  
        jsonpCallback: "receive", //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据    
        success: function(data) {  
            console.log(data)  
        },  
        error: function() {  
            alert('fail');  
        }  
    });  
function receive(data){  

}

Ajax请求成功后。会自动调用前端的receive（）方法。
缺点：jsonp类型请求数据时，只能能使用get方式，无法使用post方式请求

服务端代理
例如www.123.com/index.html需要调用www.456.com/server.php，可以写一个接口www.123.com/server.php，由这个接口在后端去调用www.456.com/server.php并拿到返回值，然后再返回给index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。
PHP端修改header（XHR2方式）

http://www.cnblogs.com/Darren_code/p/cors.html

在php接口脚本中加入以下两句即可：
header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问
header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式