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

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

2. 請(qǐng)求方式Type為xhr。如果非xhr，如json，script則也不會(huì)存在跨域問題

3. 請(qǐng)求方與服務(wù)方的源不同，即跨域，包括：

1. 協(xié)議不同

2. 域名不同

3. 端口不同

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

# 解決方案

1. 對(duì)于瀏覽器限制的解決方案-關(guān)閉瀏覽器的同源策略檢查

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




2. 請(qǐng)求方式Type為xhr的解決方案

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

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

    對(duì)于SpringBoot項(xiàng)目

   

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

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

動(dòng)態(tài)創(chuàng)建一個(gè)script，通過這個(gè)script去請(qǐng)求，請(qǐng)求完，該script即被銷毀。可通過對(duì)jQuery打斷點(diǎn)的方式驗(yàn)證。（可以看到JQuery在網(wǎng)頁(yè)源代碼嵌入了一個(gè)臨時(shí)的script，當(dāng)Jsonp請(qǐng)求完成之后，該Script即被銷毀）

• 弊端:

• 服務(wù)器需要改動(dòng)

• 只支持GET方式 (因?yàn)楂@取script都是GET方式，前端指定請(qǐng)求方式也無效，還以GET方式發(fā)起的請(qǐng)求)

3. 對(duì)于域不同的解決方案

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

1. 被調(diào)用方解決

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

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

2. 將允許跨域請(qǐng)求的信息配置在nginx或者apache轉(zhuǎn)發(fā)服務(wù)器

2. 調(diào)用方解決 

在調(diào)用方與被調(diào)用方中間再增加一層，該層做轉(zhuǎn)發(fā)，將調(diào)用方的請(qǐng)求轉(zhuǎn)發(fā)到被調(diào)用方。其中第一點(diǎn)因?yàn)檎{(diào)用方與該轉(zhuǎn)發(fā)層在同一個(gè)域名下，所以不會(huì)有跨域問題。第二點(diǎn)，由于不是瀏覽器發(fā)起的請(qǐng)求，所以轉(zhuǎn)發(fā)層調(diào)用被調(diào)用方也是不存在跨域問題的（參見跨域的三要素）。

簡(jiǎn)單請(qǐng)求與非簡(jiǎn)單請(qǐng)求

當(dāng)瀏覽器發(fā)起一個(gè)跨域請(qǐng)求的時(shí)候會(huì)先判斷是簡(jiǎn)單請(qǐng)求還是非簡(jiǎn)單請(qǐng)求。

對(duì)于簡(jiǎn)單請(qǐng)求，瀏覽器會(huì)先請(qǐng)求，拿到結(jié)果后再判斷是否跨域。

對(duì)于非簡(jiǎn)單請(qǐng)求，瀏覽器會(huì)先發(fā)起一個(gè)預(yù)檢options請(qǐng)求，檢查通過之后再發(fā)起實(shí)際的請(qǐng)求。

對(duì)于帶cookie的跨域請(qǐng)求，

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

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

特別推薦一個(gè)分享架構(gòu)+算法的優(yōu)質(zhì)內(nèi)容，還沒關(guān)注的小伙伴，可以長(zhǎng)按關(guān)注一下：
長(zhǎng)按訂閱更多精彩▼
如有收獲，點(diǎn)個(gè)在看，誠(chéng)摯感謝