歡迎光臨
每天分享高質量文章

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

常見跨域解決方案以及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,再請求一個帶參網址實現跨域通信。

原生實現:

赞(0)

分享創造快樂