跨域请求的几种方式

最新推荐文章于 2024-07-30 14:28:28 发布

tonyhzw

最新推荐文章于 2024-07-30 14:28:28 发布

阅读量2.4k

点赞数 1

分类专栏： web开发

本文链接：https://blog.csdn.net/datou0529/article/details/52270191

版权

web开发专栏收录该内容

32 篇文章 1 订阅

订阅专栏

什么是跨域

浏览器的同源策略，凡是发送请求的url的协议、域名、端口号三者之间任意一者与当前页面地址不同的极为跨域。

JSONP

通过动态插入一个script标签。由于浏览器对script标签没有同源限制。

 实际中，jsonp通常用来获取json数据，这时前后端约定一个callback。
 缺点：
   - 无法发送post请求
   - 确定jsonp的请求是否失败并不容易，大多数框架的实现都是结合超时开判断的。

$.ajax下的jsonp

   var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"
       +"?id=1&callback=?';
   $.ajax({
     url:url,
     dataType:'jsonp',
     processData: false, 
     type:'get',  //jsonp 类型下只能使用GET,不能用POST,这里不写默认为GET

     success:function(data){
       alert(data.name);
     },
     error:function(XMLHttpRequest, textStatus, errorThrown) {
       alert(XMLHttpRequest.status);
       alert(XMLHttpRequest.readyState);
       alert(textStatus);
 }});

url 中不用指定 callback 参数。对于 jQuery 中的 jsonp 来说，callback 参数是自动添加的
默认情况下，jQuery 生成的 jsonp 请求中 callback 参数是形如 callback=jQuery180099599698651582_1393992892572 这种根据看似随机的名字，对应的就是 success 那个处理函数，所以一般不用特意处理。
如果响应内容中是写死了 callback 名的话，那么可以对 jQuery 的 jsonp 指定 callback 名，如：

jQuery.ajax({
    url: 'http://api.XXX.com/603/arealist_jsonp.txt',
    dataType: 'jsonp',
    jsonpCallback: 'CallBack',
    success: function(data) {
        // do what you want
    }
})

$.jsonp()

var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"
    +"?id=1&callback=?";
$.jsonp({
  "url": url,
  "success": function(data) {
    $("#current-group").text("当前工作组:"+data.result.name);
  },
  "error": function(d,msg) {
    alert("Could not find user "+msg);
  }
});

proxy代理

首先将请求转发给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。

需要注意的是代理的是https协议的请求时需要信任该证书或者忽略证书检查，否则无法成功。

CORS跨域资源共享

现代浏览器支持的一种跨域资源请求方式。

浏览器支持情况

当你使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin;浏览器判断该相应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。

XDR

IE8、IE9提供的一种跨域解决方案，功能支持GET和POST请求，而对于协议不同的跨域是无能为力的

document.domain

适用于不同子域的跨域技术，只需要在两个子域中设置document.domain属性为更顶级的域名（除一级域名外）。

iframe

对于现代浏览器，postMessage API还是无可撼动的。

IE6/7下，使用的是一个被认为是bug或安全漏洞的特性，即navigator对象在父窗口和iframe之间是共享的。基于这一点，我们可以在父窗口中，在navigator对象上注册一个消息回调函数；在iframe中，调用navigator上的这个函数并传入参数。此时可看作，iframe往父窗口的一个函数传递了一个参数，并在父窗口的上下文中执行了，那么就相当于iframe向父窗口发送了一条消息。反之亦然。

postMessage

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

postMessage(data,origin)方法接受两个参数

1.data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。

2.origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为”*”，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为”/”。

window.onload=function(){
   window.frames[0].postMessage('getcolor','http://lslib.com');
}

接收消息时，需要监听window的message事件。这样我们就可以接收任何窗口传递来的消息了，为了安全起见，我们利用这时候的MessageEvent对象判断了一下消息源.

window.addEventListener('message',function(e){
     if(e.source!=window.parent) return;
     var color=container.style.backgroundColor;
     window.parent.postMessage(color,'*');
},false);