vue-resource中的跨域资源请求

跨域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.onload=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.onprogress=function(){
  //进度回调
}
xdr.oerror=function(){
  //出错回调
}
xdr.onload=function(){
  //成功回调
  //success(xdr.responseText)
}
xdr.ontimeout=function(){
  //超时回调
}
setTimeout(function(){
  //发送请求
  xdr.send()
},0)

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