上次小喵之前一篇【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。至於要用哪種,就由看官們決定囉。
^_^
以下是簽名:
- 歡迎轉貼本站的文章,不過請在貼文主旨上加上【轉貼】,並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】,感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫,如果您需要C#的Code,也許您可以試著用線上的工具進行轉換,這裡提供幾個參考
Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |