透過 AJAX 跨 Domain 存取 Web API 方法

發表日期 : 8/30/2016 12:00:00 AM

緣起

由於安全上的考量,預設透過 AJAX 跨 Domain 存取 WebAPI 是被禁止的,而要處理這部分的問題,除了 JSONP 以外,另外就是 W3C 定義的 Response Header 【Access-Control-Allow-Origin】可以解決這個問題,不過經測試結果,如果設定在Web.Config裡面,除了設定為【*】,讓所有的都可以用以外,就只能設定一個 Domain 。不過,實際上可能會需要有幾組 Domain 可以存取我們寫好的 WebAPI。那麼這樣的需求要怎麼處理呢?

↓預設跨 Domain 的 Ajax 被禁止,在 Chrome 的 Console 出現以下的錯誤訊息。

 

Web.Config 自訂 Header

如果要讓所有的來源都允許,只需在 web.config 裡面設定自訂的 Header 就能夠通了。

<system.webServer>
      <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*"/>
      </customHeaders>
    </httpProtocol>
</system.webServer>

 

但是,這樣一來,任何來源要使用WebAPI都可以用,如果是公開的WebAPI那沒問題,但是如果是希望只有某一個,甚至某些網站才能使用,就不能只是【Access-Control-Allow-Origin:*】,此時指定一個Domain自然沒問題

<system.webServer>
  <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="http://localhost:21259"/>
      </customHeaders>
    </httpProtocol>
</system.webServer>

 

更多參考: 


分類 : 分享 作者 : 莊英澔

讀者留言


尚未有留言