几种跨域请求详解(已采纳)

什么是跨域?

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

 

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

    如果两个页面拥有相同的协议(protocol),端口(如果指定),和主机,那么这两个页面就属于同一个源(origin), JavaScript  允许这种同源页面的数据互相通信。
 
端口 协议 ,一般生产项目中WEB页面是「看不见」端口号的,其实是缺省端口 80 ,目前网络劫持盛行,因此流行使用安全协议 HTTPS 来避免劫持
         
我们使用域名来指定一台主机,当然你也可以直接使用IP地址,重点在于不要以为 jandou.com www.jandou.com 是同一域名,实际上 www.jandou.com 是一个二级域名,而 jandou.com 俗称为 裸域
 
摘录另一篇文章《JavaScript跨域总结与解决办法》如下:URL说明是否允许通信
 
URL
说明
是否允许通信
同一域名下
允许
同一域名下不同文件夹
允许
同一域名,不同端口
看不见的端口号是缺省端口80, 
不允许
同一域名,不同协议
不允许
域名和域名对应ip
不允许
主域相同,子域不同
不允许
同一域名,不同二级域名(同上)
不允许(cookie这种情况下也不允许访问)
不同域名
不允许
 
特别注意两点:
  1. 如果是协议和端口造成的跨域问题“前台”是无能为力的,

  2. 在跨域问题上,域仅仅是通过“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方式调用。
 
 
 
  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值