常見跨域解決方案以及Ocelot 跨域配置

Intro

我們在使用前後端分離的樣式進行開發的時候，如果前端專案和api專案不是一個域名下往往會有跨域問題。今天來介紹一下我們在Ocelot閘道器配置的跨域。

什麼是跨域

跨域:

瀏覽器對於javascript的同源策略的限制,例如a.cn下麵的js不能呼叫b.cn中的js,物件或資料(因為a.cn和b.cn是不同域),所以跨域就出現了.

上面提到的,同域的概念又是什麼呢??? 簡單的解釋就是相同域名,埠相同,協議相同

同源策略:

請求的url地址,必須與瀏覽器上的url地址處於同域上,也就是域名,埠,協議相同.

比如:我在本地上的域名是study.cn,請求另外一個域名一段資料

這個時候在瀏覽器上會報錯:

這個就是同源策略的保護,如果瀏覽器對javascript沒有同源策略的保護,那麼一些重要的機密網站將會很危險~

study.cn/json/jsonp/jsonp.html

當協議、子域名、主域名、埠號中任意一個不相同時，都算作不同域。不同域之間相互請求資源，就算作“跨域”。

請求地址	形式	結果
http://study.cn/test/a.html	同一域名,不同檔案夾	成功
http://study.cn/json/jsonp/jsonp.html	同一域名,統一檔案夾	成功
http://a.study.cn/json/jsonp/jsonp.html	不同域名,檔案路徑相同	失敗
http://study.cn:8080/json/jsonp/jsonp.html	同一域名,不同埠	失敗
https://study.cn/json/jsonp/jsonp.html	同一域名,不同協議	失敗

跨域幾種常見的解決方案

解決跨域問題有幾種常見的解決方案：

跨域資源共享(CORS)

透過在伺服器端配置 CORS 策略即可，每門語言可能有不同的配置方式，但是從本質上來說，最終都是在需要配置跨域的資源的Response上增加允許跨域的響應頭，以實現瀏覽器跨域資源訪問，詳細可以參考MDN上的這篇CORS介紹

JSONP

JSONP 方式實際上傳回的是一個callbak，通常為了減輕web伺服器的負載，我們把js、css，img等靜態資源分離到另一臺獨立域名的伺服器上，在html頁面中再透過相應的標簽從不同域名下載入靜態資源，而被瀏覽器允許，基於此原理，我們可以透過動態建立script，再請求一個帶參網址實現跨域通訊。

原生實現：