您當前位置：首頁 > web前端 > jscript > 利用跨域資源共享(CORS)實現ajax跨域調用

利用跨域資源共享(CORS)實現ajax跨域調用

來源：程序員人生發布時間：2013-12-22 10:12:06 閱讀次數：3379次

幾年前，網站開發者都因為ajax的同源策略而撞了南墻。當我們驚嘆于XMLHttpRequest對象跨瀏覽器支持所帶來的巨大進步時，我們很快發現沒有一個方法可以使我們用JavaScript實現請求跨域訪問，對此我們哀嘆不已。每個人在他們自己的網站上建立代理（which was the onset of a new host of open redirect problems）來擺脫這種限制。雖然開發者利用服務器代理和其它技巧避開了這種限制，而在社區的抗議者允許ajax在本地跨域調用。許多人還沒意識到當前幾乎所有的瀏覽器（Internet Explorer 8+， Firefox 3.5+， Safari 4+和 Chrome）都可通過名為Cross-Origin Resource Sharing的協議支持ajax跨域調用。

跨域資源共享（CORS）

Cross-Origin Resource Sharing (CORS)是W3c工作草案，它定義了在跨域訪問資源時瀏覽器和服務器之間如何通信。CORS背后的基本思想是使用自定義的HTTP頭部允許瀏覽器和服務器相互了解對方，從而決定請求或響應成功與否。

對一個簡單的請求，沒有自定義頭部，要么使用GET，要么使用POST，它的主體是text/plain,請求用一個名叫Orgin的額外的頭部發送。Origin頭部包含請求頁面的頭部（協議，域名，端口），這樣服務器可以很容易的決定它是否應該提供響應。

Origin: http://www.nczonline.net/

如果服務器確定請求被通過，它將發送一個Access-Control-Allow-Origin頭部響應發送請求的同一個源，如果是一個公共資源，則返回“*”。如：

Access-Control-Allow-Origin: http://www.nczonline.net/

如果頭部丟失，或者源不匹配，那么瀏覽器將拒絕請求。如果一切順利，瀏覽器將處理請求。注意，請求和響應都不包括cookie信息。

先前提到的所有瀏覽器都支持這些簡單的請求。FF3.5 +，Safari 4和chrome通過使用XMLHttpRequest對象支持其使用。當嘗試在不同域打開一個資源時，不需任何代碼，這個行為會自動觸發。如：

var xhr = new XMLHttpRequest();xhr.open("get", "http://www.nczonline.net/some_resource/", true);xhr.onload = function(){  //instead of onreadystatechange    //do something};xhr.send(null);

在IE8中也是一樣，用同樣的方式你需要使用XDomainRequest object。

var xdr = new XDomainRequest();xdr.open("get", "http://www.nczonline.net/some_resource/");xdr.onload = function(){    //do something};xdr.send();

Mozilla小組在他們關于CORS的留言中建議應該檢查withCredentials屬性的存在性，從而決定瀏覽器是否通過XHR支持CORS。你可以合并XDomainRequest 對象的存在性來支持所有的瀏覽器：

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();        xdr.open(method, url);    } else {        xhr = null;    }    return xhr;}var request = createCORSRequest("get", "http://www.nczonline.net/");if (request){    request.onload = function(){        //do something with request.responseText    };    request.send();}

Firefox, Safari, 和Chrome的XMLHttpRequest對象與IE的XDomainRequest對象有著相似的充分的接口，這些模式運行的很好。常見的接口屬性/方法:

abort()——用來終止已在進程中請求。
Onerror（）——替代onreadystatechange方法來探測錯誤。
Onload（）——替代onreadystatechange方法來探測成功。
responseText——用來取得響應地文本。
send()——用來發送請求。

Preflighted請求

除了GET或POST，通過一種稱之為preflighted請求的服務器透明驗證機制，CORS允許使用自定義的頭部和方法，以及不同主體內容類型。當你嘗試使用高級選項中的一個來試著建立一個請求時，這時就建立了一個preflighted請求。該請求使用可選的方法，并發送如下頭部：

Origin——與簡單請求相同。
Access-Control-Request-Method——請求將要使用的方法。
Access-Control-Request-Headers——（可選）一個逗號分開的正被使用的自定義頭部列表。

例子假定一個頭部自定義為NCZ的POST請求：

Origin: http://www.nczonline.net/Access-Control-Request-Method: POSTAccess-Control-Request-Headers: NCZ

在請求期間，服務器能決定是否允許這類請求。服務器通過在響應中發送以下頭部來與瀏覽器通信。

Access-Control-Allow-Origin——與簡單請求相同。
Access-Control-Allow-Methods——用逗號分開的可接受的方法列表。
Access-Control-Allow-Headers——用逗號分開的服務器可接受的頭部列表。
Access-Control-Max-Age——preflighted 請求應該被緩存的時間。

如：

Access-Control-Allow-Origin: http://www.nczonline.netAccess-Control-Allow-Methods: POST, GETAccess-Control-Allow-Headers: NCZAccess-Control-Max-Age: 1728000

preflighted 請求一旦作出，結果將按響應中規定的時間緩存下來；第一次做出這樣的請求，你將引發一次額外的HTTP請求。

Firefox 3.5+, Safari 4+和Chrome都支持preflighted 請求，IE8則不支持。

Credentialed請求

默認狀態下，跨域請求不提供證書（cookie、HTTP身份驗證、客戶端SSL證書）。你可以規定一個請求應該通過設置withCredentials屬性為true來發送證書。如果服務器允許credentialed請求，那么它將用下面的頭部作出響應：

Access-Control-Allow-Credentials: true

如果一個credentialed請求被發送，這個頭部不會作為響應地一部分被發送。瀏覽器不會將響應傳遞給JavaScript(responseText是一個空字符串，狀態為0，onerror()被調用)。注意，服務器也能發送這個HTTP頭部作為preflight響應的一部分，以此來表明該源允許發送credentiale

d請求。

IE8不支持withCredentials屬性，irefox 3.5+, Safari 4+和Chrome都支持它。

結論

在現代web瀏覽器中對跨域AJAX調用有許多可靠地支持，然而，大多數開發者仍沒意識這些強大的功能力。只需在JavaScript和服務器端做一點額外的工作以保證正確的頭部被發送即可使用它。在允許高級請求和credentialed請求方面，IE8的執行有些滯后，但希望它對CORS的支持將會繼續改進。如果你想了解更多，我強烈建議你檢查Arun Ranganathan的示例頁。

相關閱讀