跨越请求详解

什么是跨域？

 协议 域名 端口号有一个不一样就是跨域

     跨域：跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的， XmlHttpRequest也不例外。

    如果两个页面拥有相同的协议（protocol），端口（如果指定），和主机，那么这两个页面就属于同一个源（origin）， JavaScript  允许这种同源页面的数据互相通信。

     端口 和 协议 ，一般生产项目中WEB页面是「看不见」端口号的，其实是缺省端口 80 ，目前网络劫持盛行，因此流行使用安全协议 HTTPS 来避免劫持

         我们使用域名来指定一台主机，当然你也可以直接使用IP地址，重点在于不要以为 jandou.com 与 www.jandou.com 是同一域名，实际上 www.jandou.com 是一个二级域名，而 jandou.com 俗称为 裸域 ，

摘录另一篇文章《JavaScript跨域总结与解决办法》如下：URL说明是否允许通信

URL	说明	是否允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口 看不见的端口号是缺省端口80，	不允许
http://www.a.com/a.js   https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js http://www.a.com/b.js	不同域名	不允许

特别注意两点：

第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，

第二：在跨域问题上， 域仅仅是通过“URL的首部”来识别     而不会去 判断相同的ip地址对应着两个域 或 两个域是否在同一个ip上 。

“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。

 

那么怎么实现跨域请求呢：通过Jsonp和 服务器：

• 为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了

1_1.通过 jsonp 原始方式跨域请求（方式一）：  (不会自动创建回调函数)

function  getData() {
    //jsonp ：通过创建动态script元素访问服务器，把回调函数名作为查询参数传递给服务器；
    //服务器请求到数据以后把数据放入到回调函数中返回
    var script  = document. createElement( 'script') ;
    var wyUrl  =  'http://c.m.163.com/nc/article/headline/T1348647853363/0-20.html';
    script.src  = 'http://localhost:9000?myUrl=' +wyUrl + '&callback=callBackFun1';
    document.documentElement. appendChild(script);
}
function  callBackFun1( data) {
    console. log(JSON. parse( data));

}

1_2.通过 jsonp 原始方式 跨域请求（方式二）：

< script>
    var  callBackFun2  = function( data) {    //必须写在下面src请求的前面
        console. log( JSON. parse( data));
    };
</ script>
< script  src= "http://localhost:9000?myUrl=http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html&callback=callBackFun2"></ script>

 2_1.通过 jQuery的ajax中的 jsonp 方法 跨域请求：（get请求）(会自动创建回调函数)

function  getData () {
    var  wyUrl  =  'http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html' ;
    var  url  =  'http://localhost:9000?myUrl=' + wyUrl;
    //ajax请求不用写回调函数，内部自动创建回调函数，名字随机，每次不一样
    $ . ajax ({
        url :  url,
        type :  'get ’ ,   //不写时，默认为get方法
        dataType :  'jsonp' ,
        success : function  ( data ) {
            console. log (JSON. parse ( data ));
        },
        error : function  ( e ) {
            console. log ( e );
        }
    })
}

 2_2.通过 jQuery的ajax中的 jsonp 方法 跨域请求：（post请求）(会自动创建回调函数)

           注意：ajax的post方法不会自动将传输的数据转化为JSON.stringfy格式：所以如果需要，得自己转换一下再传输

                JSON.stringify(  {wyUrl: 'http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html'}     ),

//ajax请求不用写回调函数，内部自动创建回调函数，名字随机，每次不一样   

$. ajax({
    url :  'http://localhost:9999' ,
    method :  'post' ,
    dataType :  'jsonp' ,
    headers : { 'Content-Type' :  'application/x-www-form-urlencoded'} ,
    data : {myUrl :  'http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html' ,randomNum : 55} ,
    success : function ( data) {
        console. log(JSON. parse( data)) ;
    } ,

拓展：

 3_1.通过 angular 的 $http() 中 jsonp 方法 跨域请求： (回调函数是固定写法)

          注意：angular里面的callback 必须为：JSON_CALLBACK

          原理：  jsonp利用的是script可以访问外部信息的原理发送请求并且利用jsonp协议进行数据交互 

.controller( 'myController', [ '$scope',  '$http', function ( $scope, $http) {
    var wyUrl =  'http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html';
    $scope.mine  = {
        getData : function () {
            $http({
                method :  'jsonp',
                url :  'http://localhost:9000?myUrl=' + wyUrl  + '&callback=JSON_CALLBACK'
            }). then( function  success( result) {
                        console. log( result);
                    },
                    function error( e) {
                        console. log( e);
                    });
        }
    };
}])

 3_2.通过 angular 的 $http() 中 post 方法 跨域请求：

         注意：angular的post方法会自动将传输的数据转化为JSON.stringfy格式：

         原理：post设置请求头跳过预请求来实现跨域

.controller( 'myController',  function ( $scope, $http) {
    $scope.mine  = {
        getData : function () {
            $http({
                method :  'post',
                url :  'http://localhost:8888',
                headers : {
                    'Content-Type' :  'application/x-www-form-urlencoded'
                },
                data : {
                    wyUrl :  'http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html'
                }
            }). then( function success( e) {
                        console. log( e);
                    }, function error( e) {
                        console. log( e);
                    });
        }
    }

})

总结：

• 代理实现最麻烦，但使用最广泛，任何支持AJAX的浏览器都可以使用这种方式。

• JSONP相对简单，但只支持GET方式调用。

• XHR2最简单，但只支持HTML5，如果你是移动端开发，可以选择使用XHR2（http://www.jb51.net/article/80881.htm）。

 

转载于:https://www.cnblogs.com/Vayne-N/p/7624826.html