让我们来看各浏览器对CORS(跨域资源共享)的实现
IE对CORS的实现
微软引入XDR(XDomainRequest)类型来实现CORS,下面摘自MDN:
XDomainRequest is an implementation of HTTP access control (CORS) that worked in Internet Explorer 8 and 9.
It was removed in Internet Explorer 10 in favor of using XMLHttpRequest with proper CORS; if you are targeting
Internet Explorer 10 or later, or wish to support any other browser, you need to use standard HTTP access control.XDR类似XHR(XMLHttpRequest),但具有以下一些不同之处:
1. cookie不会随请求发送,也不会随响应返回。
2. 只能设置请求头部信息中的Content-Type 字段。
3. 不能访问响应头部信息。
4. 只支持GET和POST请求。这些改变大大提高了安全性,XDR的使用跟XHR相似,这里不细讲。
有兴趣的可以看下这里,https://developer.mozilla.org/en-US/docs/Web/API/XDomainRequest
其他浏览器对CORS的实现
Firefox 3.5+ ,Safari 4+ , Chrome , IE10都通过XMLHttpRequest对象实现了对CORS的支持.现在,我们不需要写多余的XHR代码就可以尝试打开不同来源的
资源,只要在open()方法传入绝对URL即可。与XDR不同的是,通过XHR对象可以访问status和statusText属性,而且支持同步请求,不过有以下限制:
- 不能使用setRequestHeader()设置自定义头部。
- 不能发送和接收COOKIE.
- 调用getAllResponseHeaders()方法总会返回空字符串。
跨浏览器的CORS实现
function createCORSRequest(method , url){
var xhr = new XMLHttpRequest();
if( 'withCredentials' in xhr){
xhr.open(method , url , true);
}else if( typeof XDomainRequest != 'undefined'){
xhr = new XDomainRequest();
xhr.open(method , url);
}else{
xhr = null;
}
return xhr;
}
var reuqest = createCORSRequest('get','http://www.XXXX.com');
if(request){
request.onload = function(){
// 处理响应
};
request.send();
}
首先通过检查withCredentials属性(通过设置withCredentials为true可以指定某个请求发送凭据)来看XHR是否支持CORS,
然后检查是否支持XDomainRequest对象就可以兼容多个浏览器了
参考《JavaScript高级程序设计》
转载需注明出处