CORS(Crossing-Orgin Resourse Sharing,跨域资源共享)

 通过XHR实现Ajax通信的一个主要限制,来源于跨域安全策略。默认情况下,XHR对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。CORS(Crossing-Orgin Resourse Sharing,跨域资源共享),定义了在必须防问跨域资源时,浏览器与服务器应该如何沟通。其背后的思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是应该失败。

  IE对CORS的实现:

 


  IE8中引入了XDR:

  

复制代码
xhr.open("post","example.php",true);
var form = docuent.getElementById("user-infor");
xhr.send(new FormData(form));

var xdr = new XDomainRequest();
xdr.onload = function() {
    alert(xdr.responseText);
};
xdr.onerror = function() {
    alert("An error");
};
xdr.open(....);
xdr.contentType = "...";
xdr.send(...);
复制代码

 

 


 

       其它浏览器对CORS的实现:


  都是通过XMLHttpRequest对象实现对CORS的原生支持。尝试打开不同来源的资源的时候,无需额外编写代码就可以出发这个行为。要请求位于另一个域中资源,使用标准的XHR对象并在open()方法传入绝对URL即可。

  为了安全,有以下限制:

  ① 不能使用setRequestHeader()设置自定义头部;

  ② 不能发送和接受cookie;

  ③ 调用getAllResponseHeaders()方法总会返回空字符串。


  跨浏览器的CORS


  检测XHR是否支持CORS的最简单方式,就是检查是否存在withCredentials属性。再结合检测XDomianRequest对象是否存在,就可以兼顾所有浏览器了。

复制代码
function createCORSRequest(method,url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        xhr.open();
    }else if (typeof XDomianRequest != "undefined") {
        vxhr = new XDomainRequest(method,url);
        vxhr.open(method,url);
    }else {
        xhr = null;
    }
    return xhr;
}
var request = createCORSRequest("get","http://www.google.hk");
if(request) {
    request.onload = function() {
        //对request.reponseText进行处理
    };
    request.send();
}
复制代码

你可能感兴趣的:(JavaScitpt)