跨域解決方案CORS

如今來說，比較常見的跨域解決方案是經過jsonp,flash來實現的跨域訪問問題。

傳統的JSONP

在web頁面中，具備src屬性的標籤不受同源策略的影響，能夠跨域訪問不少資源，這也是不少開發者喜歡引用一些cdn服務器的框架腳本庫的一個組成吧。JSON被用來描述複雜的數據, 客戶端經過傳遞一個回調函數的做爲一個參數給跨域服務器，跨域服務器在處理數據後，用這個callback包裹待調用的JSON數據，經過返回一個動態腳原本即時執行這個回調函數，來達到跨域訪問並調用返回數據的目的

 

CORS

CORS是一個更爲新穎的解決方案，Cross-Origin Resource Sharing, 目前CORS還處於w3c的草案，它定義了跨域訪問時服務器和客戶端之間如何通訊。他的原理是經過定義HTTP頭部的信息，來讓客戶端和服務器互相確認，從而決定是否相應本次請求。

 

CORS和JSONP相比，更爲方便，是否更爲安全有待驗證!

1: JSONP目前只支持get請求，由於它是經過模擬src資源訪問的方式進行請求，而CORS支持了全部的HTTP請求類型，它從經過定義HTTP頭文件信息決定請求，因此能夠指定請求類型

2：使用CORS，web開發者可使用普通的XMLHttpRequest,來發起請求，固然如今的JSONP方案已經相對成熟，大部分的第三方腳本框架都進行了封裝支持，但使用CORS應該具備更好的容錯機制。

 

下面詳細說明下如何使用CORS：

1 web端： 同普通的XMLHttpRequest 相差無幾

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://xxx.a.com", true);
xhr.send();

這裏須要指定絕對路徑(由於你要跨域, 相對地址明顯不行)

兼容性：老的瀏覽器是不支持CORS的

咱們可使用特性探測的方式來作兼容性測試， "withCredentials" 這個特性就存在於XMLHttpRequest2中，這個是用來在發送跨域請求的憑據，模式這個屬性會是false,當設置爲true時會自動帶上cookie,固然cookie依然遵照同源策略的規則，你不可訪問。咱們這裏只是用於特性探測，暫時不須要設置

function compatibleCORS(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        xhr.open(method, xhr, true);    
    } else if (typeof XDomainRequest != "undefined") {
        //XDomainRequest是IE用於支持CORS請求的對象
        xhr = new XDomainRequest();
        xhr.open(method, xhr);
    } else {
        xhr = null;
    }
    return xhr; 
}

var xhr = compatibleCORS('GET', "http://xxxxxxx");
if (!xhr) {
    throw new Erorr("CORS不被支持");
}

2: 服務端

若是此時直接用上面的js發送請求，服務器是不會響應該請求的，會報Access-Control-Allow-Origin 的錯誤。爲了安全策略，必定要在服務端指定一個白名單，而不是使用泛匹配的方式(*號) Access-Control-Allow-Origin: www.xxx.com

PS: 若是要帶上cookie作用戶憑據，則還須要設置Access-Control-Allow-Credentials: true

關於服務器端如何設置，須要看什麼服務器端，網上有不少相關的設置方式，這裏不在敘述

瀏覽器的支持狀況能夠去這裏查看http://caniuse.com/cors