幾年前，網站開發者都因為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();

????????xhr.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:?POST
Access-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.net
Access-Control-Allow-Methods:?POST,?GET
Access-Control-Allow-Headers:?NCZ
Access-Control-Max-Age:?1728000

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

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

Credentialed請求

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

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

Access-Control-Allow-Credentials:?true

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

結論

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

?

總結

以上是生活随笔為你收集整理的跨域资源共享（CORS）--跨域ajax的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。