【跨域】解決辦法：利用 Access-Control-Allow-Origin

傳統(tǒng)的跨域請求沒有好的解決方案，無非就是jsonp和iframe，隨著跨域請求的應(yīng)用越來越多，W3C提供了跨域請求的標(biāo)準(zhǔn)方案（Cross-Origin Resource Sharing）。IE8、Firefox 3.5 及其以后的版本、Chrome瀏覽器、Safari 4 等已經(jīng)實現(xiàn)了 Cross-Origin Resource Sharing 規(guī)范，實現(xiàn)了跨域請求。

在服務(wù)器響應(yīng)客戶端的時候，帶上Access-Control-Allow-Origin頭信息。

Access-Control-Allow-Origin?所有域名設(shè)置：

Access-Control-Allow-Origin:*#則允許所有域名的腳本訪問該資源。

Access-Control-Allow-Origin?單個域名設(shè)置：

Access-Control-Allow-Origin:https://www.fujieace.com? ? #允許特定的域名訪問。

Access-control-Allow-Origin 多個域名設(shè)置：

很多人認(rèn)為直接按照以下這樣寫就可以了，其實是錯誤的，因為Access-Control-Allow-Origin只允許一個值；逗號分隔多個值是行不通的。

Access-Control-Allow-Origin: https://www.google.com,https://www.baidu.com

于是換種方式，查資料得到一個這樣的思路：先自己判斷域名是否是允許的，如果是再設(shè)置允許跨域訪問。那么這樣就可以了。Node.js多域名跨域代碼如下：

app.all(‘*’,function(req, res, next){if( req.headers.origin == ‘https://www.google.com’ || req.headers.origin == ‘https://www.baidu.com’ ){ res.header(“Access-Control-Allow-Origin”, req.headers.origin); res.header(‘Access-Control-Allow-Methods’, ‘POST, GET’); res.header(‘Access-Control-Allow-Headers’, ‘X-Requested-With’); res.header(‘Access-Control-Allow-Headers’, ‘Content-Type’); } next(); });

使用時可以把允許訪問的域名寫成一個數(shù)組，然后JS寫一個比較字符串是否在數(shù)組內(nèi)的函數(shù)，這樣使用就比較方便了。其中：

Access-Control-Allow-Origin 就是我們需要設(shè)置的域名。

Access-Control-Allow-Methods 是允許的請求方式。

Access-Control-Allow-Headers 跨域允許包含的頭。

PHP跨塔例子，只需PHP添加響應(yīng)頭信息：

header("Access-Control-Allow-Origin: *");

Cross-Origin Resource Sharing協(xié)議介紹

傳統(tǒng)的Ajax請求只能獲取在同一個域名下面的資源，但是HTML5打破了這個限制，允許Ajax發(fā)起跨域的請求。瀏覽器是可以發(fā)起跨域請求的，比如你可以外鏈一個外域的圖片或者腳本。但是Javascript腳本是不能獲取這些資源的內(nèi)容的，它只能被瀏覽器執(zhí)行或渲染。

在Flash和Silverlight中，服務(wù)器需要創(chuàng)建一個crossdomain.xml的文件來允許跨域請求。如果這個文件聲明“http://your.site”允許來自“http://my.site”的請求，則來自“http://my.site”的請求可以訪問所有“http://your.site”的文件。這是一種整個站點層面上的控制模式，要么你允許一個外域的站點訪問，要么拒絕。

COR不一樣，它是頁面層次的控制模式。每一個頁面需要返回一個名為‘Access-Control-Allow-Origin’的HTTP頭來允許外域的站點訪問。你可以僅僅暴露有限的資源和有限的外域站點訪問。在COR模式中，訪問控制的職責(zé)可以放到頁面開發(fā)者的手中，而不是服務(wù)器管理員。當(dāng)然頁面開發(fā)者需要寫專門的處理代碼來允許被外域訪問。

另外一個主要的區(qū)別是，某個站點的crossdomain.xml文件是最早被瀏覽器獲取并分析的。如果一個外域的站點不允許被訪問，瀏覽器壓根就不會發(fā)出跨域請求。

COR則相反，Javascript先發(fā)出跨域請求，然后檢查回復(fù)的‘Access-Control-Allow-Origin’頭。如果這個頭允許該外域訪問，則Javascript可以讀取這個回復(fù)，否則就被禁止訪問。如果請求不是一個簡單的COR，則向外域服務(wù)器發(fā)送預(yù)檢驗請求，如果回復(fù)的頭部允許訪問，則發(fā)送跨域請求，否則禁止。

COR的實現(xiàn)標(biāo)準(zhǔn)就是CORS協(xié)議。

對于瀏覽器來說，COR請求都是Javascript發(fā)起的，COR請求有兩種：

1、簡單的COR請求，它可以直接向外域資源發(fā)起請求。它必須僅僅包含簡單的方法和頭，具體定義看[2] 6.1。

2、如果COR包含復(fù)雜的方法和頭，它需要發(fā)出預(yù)檢驗（Preflight）請求，它先向資源服務(wù)器發(fā)出一個OPTIONS方法、包含“Origin”頭的請求。該回復(fù)可以控制COR請求的方法，HTTP頭以及驗證等信息。只有該請求獲得允許以后，才會發(fā)起真實的外域請求。

下面是一個簡單的COR請求：

varclient =newXMLHttpRequest();client.open("GET","http://bar.org/b")client.onreadystatechange =function(){/* do something */}client.send()

假設(shè)這個請求所在頁面的域是“http://foo.org”。 如果來自“http://bar.org/b”的回復(fù)包含這樣的頭：

Access-Control-Allow-Origin: http://foo.org

則表明，它允許來自“http://foo.org”的跨域請求。

下面的Javascript會發(fā)出預(yù)檢驗請求和真實請求：

varclient =newXMLHttpRequest();client.open("GET","http://bar.org/b")client.setRequestHeader('Content-Type','text/html')client.onreadystatechange =function(){/* do something */}client.send()

由于“Content-type: text/html”不是一個簡單的頭，它會先向"http://bar.org/b"發(fā)出一個OPTIONS的HTTP請求。 回復(fù)可能包含這樣的頭：

Access-Control-Allow-Origin: http://foo.orgAccess-Control-Max-Age: 3628800Access-Control-Allow-Methods: GET，PUT,DELETEAccess-Control-Allow-Headers:content-type"Access-Control-Allow-Origin"表明它允許"http://foo.org"發(fā)起跨域請求"Access-Control-Max-Age"表明在3628800秒內(nèi)，不需要再發(fā)送預(yù)檢驗請求，可以緩存該結(jié)果"Access-Control-Allow-Methods"表明它允許GET、PUT、DELETE的外域請求"Access-Control-Allow-Headers"表明它允許跨域請求包含content-type頭

如果預(yù)檢驗請求獲得通過，接下來Javascript就會發(fā)起真實的COR請求，過程跟簡單的COR請求類似。

CORS協(xié)議的實現(xiàn)

現(xiàn)在HTML5的標(biāo)準(zhǔn)如火如荼的在制定和發(fā)展中,CORS作為HTML5的一部分，在大部分現(xiàn)代瀏覽器中有所支持，支持(部分支持)CORS協(xié)議的瀏覽器有IE8+, Firefox5+, Chrome12+, Safari4+

服務(wù)端實現(xiàn)

Thinktecture.IdentityModel 這個庫已經(jīng)為我們的WebAPI,MVC的項目做好了支持，具體參看[6]。

參考資料：

[1] 、http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity

[2] 、http://www.w3.org/TR/cors/

[3]、https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

[4]、http://www.cnblogs.com/yoyiorlee/archive/2010/11/07/1871308.html

[5]、http://restfulobjects.codeplex.com/wikipage?title=Cross%20Origin%20Resource%20Sharing&referringTitle=Documentation

[6]、https://brockallen.com/2012/06/28/cors-support-in-webapi-mvc-and-iis-with-thinktecture-identitymodel/