利用跨域資源共享（CORS）實(shí)現(xiàn)ajax跨域調(diào)用

2011-04-27 11:00:00來源：作者：

前幾天看了一篇E文說部署CORS的文章，CORS是一中跨域的方式，于是上網(wǎng)找了下Nicholas C. Zakas 的文章《Cross-domain Ajax with Cross-Origin Resource Sharing》，并且找到了中文的翻譯，感覺不錯(cuò)，轉(zhuǎn)來分享之。

前幾天看了一篇E文說部署CORS的文章，CORS是一中跨域的方式，于是上網(wǎng)找了下Nicholas C. Zakas 的文章《Cross-domain Ajax with Cross-Origin Resource Sharing》，并且找到了中文的翻譯，感覺不錯(cuò)，轉(zhuǎn)來分享之。

幾年前，網(wǎng)站開發(fā)者都因?yàn)閍jax的同源策略而撞了南墻。當(dāng)我們驚嘆于XMLHttpRequest對(duì)象跨瀏覽器支持所帶來的巨大進(jìn)步時(shí)，我們很快發(fā)現(xiàn)沒有一個(gè)方法可以使我們用JavaScript實(shí)現(xiàn)請求跨域訪問，對(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ì)方，從而決定請求或響應(yīng)成功與否。

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

Origin: http://www.nczonline.net

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

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

 

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

先前提到的所有瀏覽器都支持這些簡單的請求。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)程中請求。
  • Onerror()——替代onreadystatechange方法來探測錯(cuò)誤。
  • Onload()——替代onreadystatechange方法來探測成功。
  • responseText——用來取得響應(yīng)地文本。
  • send()——用來發(fā)送請求。

Preflighted請求

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

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

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

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

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

  • Access-Control-Allow-Origin——與簡單請求相同。
  • Access-Control-Allow-Methods——用逗號(hào)分開的可接受的方法列表。
  • Access-Control-Allow-Headers——用逗號(hào)分開的服務(wù)器可接受的頭部列表。
  • Access-Control-Max-Age——preflighted 請求應(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 請求一旦作出，結(jié)果將按響應(yīng)中規(guī)定的時(shí)間緩存下來；第一次做出這樣的請求，你將引發(fā)一次額外的HTTP請求。

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

Credentialed請求

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

如果一個(gè)credentialed請求被發(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請求。

Access-Control-Allow-Credentials: true

IE8不支持withCredentials屬性，F(xiàn)irefox 3.5+, Safari 4+和Chrome都支持它。

結(jié)論

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

相關(guān)閱讀

原文地址：http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/
轉(zhuǎn)載地址：http://www.denisdeng.com/?p=1024

關(guān)鍵詞：ajax

贊助商鏈接: