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

跨域資源共享（CORS）

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

對(duì)一個(gè)簡單的請(qǐng)求，沒有自定義頭部，要么使用GET，要么使用POST，它的主體是text/plain,請(qǐng)求用一個(gè)名叫Orgin的額外的頭部發(fā)送。Origin頭部包含請(qǐng)求頁面的頭部（協(xié)議，域名，端口），這樣服務(wù)器可以很容易的決定它是否應(yīng)該提供響應(yīng)。

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

如果服務(wù)器確定請(qǐng)求被通過，它將發(fā)送一個(gè)Access-Control-Allow-Origin頭部響應(yīng)發(fā)送請(qǐng)求的同一個(gè)源，如果是一個(gè)公共資源，則返回“*”。如：

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

?

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

先前提到的所有瀏覽器都支持這些簡單的請(qǐng)求。FF3.5?+，Safari?4和chrome通過使用XMLHttpRequest對(duì)象支持其使用。當(dāng)嘗試在不同域打開一個(gè)資源時(shí)，不需任何代碼，這個(gè)行為會(huì)自動(dòng)觸發(fā)。如：

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小組在他們關(guān)于CORS的留言中建議應(yīng)該檢查withCredentials屬性的存在性，從而決定瀏覽器是否通過XHR支持CORS。你可以合并XDomainRequest?對(duì)象的存在性來支持所有的瀏覽器：

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對(duì)象與IE的XDomainRequest對(duì)象有著相似的充分的接口，這些模式運(yùn)行的很好。常見的接口屬性/方法:

·?abort()——用來終止已在進(jìn)程中請(qǐng)求。

·?Onerror()——替代onreadystatechange方法來探測錯(cuò)誤。

·?Onload()——替代onreadystatechange方法來探測成功。

·?responseText——用來取得響應(yīng)地文本。

·?send()——用來發(fā)送請(qǐng)求。

Preflighted請(qǐng)求

除了GET或POST，通過一種稱之為preflighted請(qǐng)求的服務(wù)器透明驗(yàn)證機(jī)制，CORS允許使用自定義的頭部和方法，以及不同主體內(nèi)容類型。當(dāng)你嘗試使用高級(jí)選項(xiàng)中的一個(gè)來試著建立一個(gè)請(qǐng)求時(shí)，這時(shí)就建立了一個(gè)preflighted請(qǐng)求。該請(qǐng)求使用可選的方法，并發(fā)送如下頭部：

·?Origin——與簡單請(qǐng)求相同。

·?Access-Control-Request-Method——請(qǐng)求將要使用的方法。

·?Access-Control-Request-Headers——（可選）一個(gè)逗號(hào)分開的正被使用的自定義頭部列表。

例子假定一個(gè)頭部自定義為NCZ的POST請(qǐng)求：

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

在請(qǐng)求期間，服務(wù)器能決定是否允許這類請(qǐng)求。服務(wù)器通過在響應(yīng)中發(fā)送以下頭部來與瀏覽器通信。

·?Access-Control-Allow-Origin——與簡單請(qǐng)求相同。

·?Access-Control-Allow-Methods——用逗號(hào)分開的可接受的方法列表。

·?Access-Control-Allow-Headers——用逗號(hào)分開的服務(wù)器可接受的頭部列表。

·?Access-Control-Max-Age——preflighted?請(qǐng)求應(yīng)該被緩存的時(shí)間。

如：

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?請(qǐng)求一旦作出，結(jié)果將按響應(yīng)中規(guī)定的時(shí)間緩存下來；第一次做出這樣的請(qǐng)求，你將引發(fā)一次額外的HTTP請(qǐng)求。

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

Credentialed請(qǐng)求

默認(rèn)狀態(tài)下，跨域請(qǐng)求不提供證書（cookie、HTTP身份驗(yàn)證、客戶端SSL證書）。你可以規(guī)定一個(gè)請(qǐng)求應(yīng)該通過設(shè)置withCredentials屬性為true來發(fā)送證書。如果服務(wù)器允許credentialed請(qǐng)求，那么它將用下面的頭部作出響應(yīng)：

如果一個(gè)credentialed請(qǐng)求被發(fā)送，這個(gè)頭部不會(huì)作為響應(yīng)地一部分被發(fā)送。瀏覽器不會(huì)將響應(yīng)傳遞給JavaScript(responseText是一個(gè)空字符串，狀態(tài)為0，onerror()被調(diào)用)。注意，服務(wù)器也能發(fā)送這個(gè)HTTP頭部作為preflight響應(yīng)的一部分，以此來表明該源允許發(fā)送credentialed請(qǐng)求。

Access-Control-Allow-Credentials:?true

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

結(jié)論

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

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。