JavaScript--跨域--CORS

CORS

通过XHR实现ajax通信的主要限制来源于跨域安全策略，默认情况下只能访问与包含它的页面的同一个域中的资源，这种安全策略可以预防恶意行为。
CORS（跨域资源共享）：背后的基本思想，就是使用自定义的http头部让浏览器和服务器进行沟通，从而决定请求或者响应成功与否。

IE浏览器对CORS的实现

引入了XDR（XDomainRequest）类型。与XHR类似，但能实现安全可靠的跨域通信。
用法与XHR相似，也是创建一个XDomainRequest实例，调用open()方法，再调用send()方法，与XHR不同的是，XDR对象的open()方法有只接受两个参数，请求的类型和URL。
所有的XDR的请求都是异步的，不能用他来创建同步请求。
请求返回之后，会触发load事件，相应数据也会放在responseText属性中。

其他浏览器

chrome、Firefox、Safari，需要使用XMLHttpRequest2对象。

跨浏览器的CORS实现

function createCORSRequest(method,url) {
    var xhr = new XMLHttpRequest();
    //withCredentials是XMLHttpRequest2中独有的，用于判断浏览器是否支持XMLHttpRequest2
    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 request = createCORSRequest('get','http://www.somewhere-else.com/page');
if(request) {
    request.onload = function() {
        //对request.responseText进行处理
    }
    request.onerror = function() {
    }
    request.onprocess = function(){
    }
    request.send();
}

cors与jsonp的比较

都能解决ajax直接请求普通文件存在跨域无权限访问的问题

1. jsonp只能实现get请求，而cors支持所有类型的http请求
2. 使用cors，开发者可以使用普通的XMLHttpRequest发起请求和获取数据，比起jsonp有更好的错去处理
3. jsonp主要被老的浏览器支持，它们往往不支持cors，而绝大多数浏览器都已经支持了cors。