vue-resource中的跨域资源请求

小灰灰 2021-06-24 16:10 460阅读 0赞

## 跨域AJAX ##

早期，由于浏览器的安全策略，AJAX只能在同域情况下发送成功。但是目前很多浏览器已经开始支持XMLHttpRequest2。XMLHttpRequest2引入了大量的新特性，例如跨域资源请求（CORS）、上传进度事件、支持二进制数据上传/下载等。  
现在我们来了解一下vue-resource中用到的CORS特性和XMLHttpRequest2的替代品XDomainRequest。

## XMLHttpRequest2 CORS ##

XMLHttpRequest2是第二代XMLHttpRequest技术，提交AJAX请求还是和普通的XMLHttpRequest请求一样，只是增加了一些新特性。  
在提交AJAX跨域请求时，首先需要知道当前浏览器是否支持XMLHttpRequest2，判断方法是使用in操作符检测当前XMLHttpRequest实例对象是否包含withCredentials属性，如果包含则支持CORS。代码示例如下：

var xhrCors='withCredentials' in new XMLHttpRequest()

除此之外，还需要服务端启用CORS支持。  
如果想从http://example.com域中提交请求到http://crossdomain.com域中，需要在crossdomain.com域中添加如下响应头：

Access-Control-Allow-Origin:http://example.com

如果crossdomain.com要允许所有异域都可以AJAX请求该域资源，则添加如下响应头：

Access-Control-Allow-Origin:*

服务端开启CROS支持后，在浏览器中就可以和提交普通AJAX请求一样提交跨域请求了。代码示例如下：

var xhr=new XMLHttpRequest()
    xhr.open('GET','http://www.crossdomain.com/hello.json')
    xhr.function(e){
      var data=JSON.parse(this.response)
      ...
    }
    xhr.send()

## XDomainRequest ##

如果想在IE8、IE9中支持CROS（IE10以后版本都支持XMLHttpRequest2），我们可以使用XDomainRequest（该属性目前已废弃，不建议使用）。如果vue-resource不支持XMLHttpRequest2，则会降级使用此方式。代码示例如下：

//实例化XDomainRequest
    var xdr=new XDomainRequest()
    xdr.open('GET','http://www.crossdomain.com/hello.json')
    xdr.function(){
      //进度回调
    }
    xdr.oerror=function(){
      //出错回调
    }
    xdr.function(){
      //成功回调
      //success(xdr.responseText)
    }
    xdr.ontimeout=function(){
      //超时回调
    }
    setTimeout(function(){
      //发送请求
      xdr.send()
    },0)

注：XDomain只支持GET和POST两种请求，如果要在vue-resource中使用其他方法请求，请设置请求选项对象的emulateHTTP为true。在定时器中调用xdr.send()方法，是为了防止多个XDomainRequest请求同时发送时部分请求丢失。