Q:什麼是跨域？
A:
- 簡單來講，跨域是指從一個域名的網頁去請求另一個域名的資源
- 由於有同源策略的關係，一般是不允許這麼直接訪問的
- 但是，很多場景經常會有跨域訪問的需求
- 比如，在前後端分離的模式下，前後端的域名是不一致，此時就會發生跨域問題
Q:剛剛提到同源策略，說說什麼是同源策略？
A:
- 所謂同源是指”協議+域名+埠”三者相同，即便兩個不同的域名指向同一個IP地址，也非同源。
- 同源策略限制一下幾種行為：
- Cookie，LocalStorage和IndexDB無法讀取
- DOM和Js物件無法獲取
- AJAX請求不能傳送
Q:為什麼要有同源策略呢？
A:
- 舉個例子，假如你剛剛在網銀輸入賬號秘密，檢視來自己的餘額，然後再去訪問帶有顏色的網站
- 這個網站可以訪問剛剛的網銀站點，並獲取賬號密碼，那後果可想而知
- 因此，從安全的角度來講，同源策略是有利於保護網站資訊的。
Q:很多場景避免不了跨域訪問，那麼這麼解決呢？
A:有以下幾種方法
- CORS,跨域資源共享
- CORS其實是瀏覽器指定的一個規範，瀏覽器會自動進行CORS通訊
- 它的實現主要在服務端，透過一些HTTP Header來限制可以訪問的域
- 例如頁面A需要訪問B伺服器上的資料，如果B伺服器上宣告瞭允許A的域名訪問，那麼從A到B的跨域請求就可以完成。
- @CrossOrigin註釋
- 如果專案使用的是springboot，可以在Controller類上新增@CrossOrigin(origins=”*”)註解就可以實現對當前controller的跨域訪問了
- 當然這個標籤也可以加到方法上，或者直接加到入口類上對所以介面進行跨域處理
- 勘誤: @CrossOrigin跟jdk版本無關，跟SpringMVC的版本有關。SpringMVC的版本要在4.2或以上才支援@CrossOrigin
- nginx反向代理介面跨域
- 首先同源策略是瀏覽器的安全策略，不是HTTP協議的一部分
- 伺服器端呼叫HTTP介面只是使用HTTP協議，不會執行JS指令碼，不需要同源策略，也就不存在跨域訪問。
- nginx反向代理介面實習思路如下：
- 透過nginx配置一個代理伺服器（域名與domain1相同，埠不同）做跳板機，反向代理訪問domain2介面，並且可以順便修改cookie中domain資訊，方便當前域cookie寫入，實現跨域登入
這樣我們的前端代理只有訪問http:www.domain1.com:81/*就可以了
- 透過nginx配置一個代理伺服器（域名與domain1相同，埠不同）做跳板機，反向代理訪問domain2介面，並且可以順便修改cookie中domain資訊，方便當前域cookie寫入，實現跨域登入
- 透過jsonp跨域
- 透過為減輕web伺服器的負載，我們把js,css,img等靜態資源分離到另一臺獨立域名的伺服器上
- 在html頁面中再透過相應的標籤從不同域名下載入靜態資源，這是瀏覽器允許的操作
- 基於此原理，我們可以透過動態建立script，再請求一個帶參網頁實現跨域通訊。
Other
- 跨域問題的本質是瀏覽器安全策略的攔截，即瀏覽器不允許你在自己的資源場景內訪問其他非自己資源，所以才要頁面端伺服器做本地反向代理。解決辦法，如果是ie瀏覽器，就把安全策略級別調低就行了
- springboot整合shiro專案的坑：如果用WebMvcConfigure配置跨域，shiro的攔截器會在此更早觸發，導致跨域失效，推薦注入CorsFilter配置
- 那是因為mvc本身的攔截器是在dispatch之後執行的 而shiro的攔截是基於filter的 filter發生在dispatch之前 不算坑 機制就是這樣的
- 開發的過程中用的最多的就是透過本地node服務轉發請求，像現在的vue cli和creat react app還有眾多服務端渲染專案都是預設內建了node服務的
資料資訊來源：
嗶哩嗶哩：什麼是跨域？怎麼解決？
本作品採用《CC 協議》，轉載必須註明作者和本文連結