[WebAPI][CORS]使用 xdomain.js 實現 WebAPI 多組(Multiple) 跨 Domain

上次小喵之前一篇【WebAPI 設定多組(Multiple) 跨 Domain】裡面,透過Global.asax,讀取設定檔方式來判斷Client端傳入的Origin,藉此回傳【Access-Control-Allow-Origin】的Header來讓Client端允許CORS。後來同事又提供另一個方式來處理,只需在Server上放一個html,不用任何設定,就可以達到CORS限定多Domain的功能,方法真的非常簡單,怎麼做,讓我們看下去~

緣起

上次小喵之前一篇【WebAPI 設定多組(Multiple) 跨 Domain】裡面,透過Global.asax,讀取設定檔方式來判斷Client端傳入的Origin,藉此回傳【Access-Control-Allow-Origin】的Header來讓Client端允許CORS。後來同事又提供另一個方式來處理,只需在Server上放一個html,不用任何設定,就可以達到CORS限定多Domain的功能,方法真的非常簡單,怎麼做,讓我們看下去~

 

XDomain

這方式主要是使用 XDomain 的 JS Library,官方的網址如下:

 

https://github.com/jpillora/xdomain

 

官方的說明還蠻清楚的,小喵這邊就略做翻譯的工作,如果功能或方式有變,請以官方的為主。

 

使用方式:

 

假設小喵的相關狀況如下:

WebAPI端:網址是 http://xyz.domain1.com

Client端:網址是http://abc.domain2.com

其中使用到的xdomain.min.js可以下載到WebAPI端或Client端

 

單一Domain時:

1.WebAPI端

新增一個proxy.html的網頁,放在【http://xyz.domain1.com/xdomain/proxy.html】,其內容如下:


<!DOCTYPE HTML>
<script src="http://jpillora.com/xdomain/dist/0.5/xdomain.min.js" master="http://abc.domain2.com"></script>

2.Client端

在使用Ajax的頁面中,新增一個JS的include,相關內容如下:


<script src="http://jpillora.com/xdomain/dist/0.5/xdomain.min.js" slave="http://xyz.domain1.com/xdomain/proxy.html"></script>

 

就這樣,剩下的就是直接使用Ajax,本來會遇到的CORS被拒絕的訊息瞬間不見。

 

多Domain時

1.Server端一樣新增一個proxy.html的檔案,不過內容可以

a.用*代表某domain下的各主機,例如:abc1.domain2.com , abc2.domain2.com, abc3.domain2.com , …,就可以設定為 *.domain2.com

所以proxy.html的內容將會是


<!DOCTYPE HTML>
<script src="http://jpillora.com/xdomain/dist/0.5/xdomain.min.js" master="http://*.domain2.com"></script>

b.多Domain,分別不同,假設分別有abc.domain2.com , def.domian3.com , ghi.domain4.com , …

那麼proxy.html的內容將會是


<script src="http://jpillora.com/xdomain/dist/0.5/xdomain.min.js"></script>
<script>
xdomain({
  masters: {
    'http://abc.domain2.com': /.*/
    ,'http://def.domain3.com': /.*/
    ,'http://ghi.domain4.com': /.*/
  }
});
</script>

2. 每個Client端都一樣,只需要設定好Server端的 proxy.html在哪裡,引用xdomain.min.js即可


<script src="http://jpillora.com/xdomain/dist/0.5/xdomain.min.js" slave="http://xyz.domain1.com/xdomain/proxy.html"></script>

 

末記

這方式提供了在Server端設定CORS的另一個選擇的方式,在XDomain裡面,使用這方式,也不會先送OPTION的Method,然後再送GET, POST,所以也不必特意去處理OPTION的Action。至於要用哪種,就由看官們決定囉。

^_^

 


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6)