# 為什么會產(chǎn)生跨域問題

1. 瀏覽器限制，目前所有瀏覽器都實現(xiàn)了同源策略規(guī)范。

2. 請求方式Type為xhr。如果非xhr，如json，script則也不會存在跨域問題

3. 請求方與服務方的源不同，即跨域，包括：

1. 協(xié)議不同

2. 域名不同

3. 端口不同

同時滿足三個條件才有可能產(chǎn)生跨域問題。

# 解決方案

1. 對于瀏覽器限制的解決方案-關閉瀏覽器的同源策略檢查

--args--disable-web-security--user-data-dir設置瀏覽器的啟動參數(shù)，將瀏覽器的同源策略取消。該方式要求所用的用戶進行手動操作，肯定是不現(xiàn)實的。




2. 請求方式Type為xhr的解決方案

   既然只有Type為xhr的請求才會存在跨域請求，那么我們是不是可以換一種請求方式呢。Jsonp的實現(xiàn)就是這樣。將原本Type是xhr的請求偽造成script請求。

   Jsonp的請求路徑后面會自動帶上callback參數(shù)，服務端可據(jù)此判斷是否是jsonp請求，將返回值以script的形式進行封裝。且服務端需要進行相應的改動。

    對于SpringBoot項目

   

    
@ControllerAdvice
    
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice{
    
 public JsonpAdvice{
    
 super("callback"); //約定的jsonp請求參數(shù)
    
 }
    
}
   

JQuery實現(xiàn)jsonp的原理：

動態(tài)創(chuàng)建一個script，通過這個script去請求，請求完，該script即被銷毀?？赏ㄟ^對jQuery打斷點的方式驗證。（可以看到JQuery在網(wǎng)頁源代碼嵌入了一個臨時的script，當Jsonp請求完成之后，該Script即被銷毀）

• 弊端:

• 服務器需要改動

• 只支持GET方式 (因為獲取script都是GET方式，前端指定請求方式也無效，還以GET方式發(fā)起的請求)

3. 對于域不同的解決方案

根據(jù)實際系統(tǒng)架構來決定使用哪種方式

1. 被調用方解決

   返回的響應頭的包含允許跨域訪問的信息，需要被調用方進行代碼的修改。（可由具體應用添加允許跨域信息，也可以由容器，Tomcat，jetty等添加）

1. 通過Filter實現(xiàn)

2. 將允許跨域請求的信息配置在nginx或者apache轉發(fā)服務器

2. 調用方解決 

在調用方與被調用方中間再增加一層，該層做轉發(fā)，將調用方的請求轉發(fā)到被調用方。其中第一點因為調用方與該轉發(fā)層在同一個域名下，所以不會有跨域問題。第二點，由于不是瀏覽器發(fā)起的請求，所以轉發(fā)層調用被調用方也是不存在跨域問題的（參見跨域的三要素）。

簡單請求與非簡單請求

當瀏覽器發(fā)起一個跨域請求的時候會先判斷是簡單請求還是非簡單請求。

對于簡單請求，瀏覽器會先請求，拿到結果后再判斷是否跨域。

對于非簡單請求，瀏覽器會先發(fā)起一個預檢options請求，檢查通過之后再發(fā)起實際的請求。

對于帶cookie的跨域請求，

1. 需要將allowedOrigins設置為具體的origin，而不能使用 *。

2. 需要設置響應參數(shù) allowCredentials(true)，允許帶cookie的跨域

特別推薦一個分享架構+算法的優(yōu)質內容，還沒關注的小伙伴，可以長按關注一下：
長按訂閱更多精彩▼
如有收獲，點個在看，誠摯感謝