? ? ? 在開發(fā)網(wǎng)站時通過框架或是瀏覽器的?fetch、XHR?請求過外部 API，那么一定遇到過跨域請求，還有錯誤信息；今天來討論跨域問題的原因及解決方法。

跨域請求

? ? ? ?跨域是開發(fā)過程中必定遇到過的問題，當(dāng)通過 js對不同的來源發(fā)送請求時，這個請求的響應(yīng)就會被瀏覽器攔截，不交給 js處理。這里的“不同來源”指的是目標(biāo)資源與當(dāng)前網(wǎng)頁的域（domain）、通訊協(xié)議（protocol）或網(wǎng)絡(luò)端口（port）只要有任一項不同，就算是不同來源。例如下面這幾個例子：

假設(shè)當(dāng)前用戶在：https://a.com ： [?] https://a.com/test -> 同域 [?] https://m.a.com -> 不同域 [?] https://a.com:8800-> 端口不同 [?] http://a.com -> 通訊協(xié)議不同

? ? ?理解什么是跨域了，那為什么瀏覽器要把跨域請求資源攔截掉呢？

?

? ? ?這主要是考慮到用戶的信息安全。

?

? ? ?假如A是一個惡意開發(fā)者，他編寫的網(wǎng)站會嘗試通過 XHR 打向百度、csdn等目標(biāo)網(wǎng)站；如果使用者原先就有目標(biāo)網(wǎng)站的登錄狀態(tài)，A便能窺探他的隱私，得到不該取得的數(shù)據(jù)。再想想看，如果目標(biāo)網(wǎng)站換成 Email、銀行、電商，如果沒有瀏覽器限制跨域請求的保護，惡意開發(fā)者便能為所欲為。

? ? ?注意：跨域請求雖然會被瀏覽器攔截下來，但攔截的是響應(yīng)（Response）而不是請求（Request）。

解決方案

? ? ?關(guān)于跨域請求的解決方案有很多，例如 JSONP，也就是通過 HTML 中沒有跨域限制的標(biāo)簽如?img、script?等，再通過指定回調(diào)函數(shù)，將響應(yīng)的內(nèi)容介接回 JavaScript 中；或是通過iframe，繞過跨域保護獲取目標(biāo)資源等。下面說明兩種常見也相對正規(guī)的解決方式。

? ? ?CORS

? ? ? ? ? ? 最標(biāo)準(zhǔn)、正確的解決方法是通過 W3C 規(guī)范 的“ 跨域資源共享（Cross-Origin Resource Sharing ，CORS）”，通過服務(wù)器在 HTTP 頭中的設(shè)置，可以使瀏覽器能夠獲取不同來源的資源。

?

? ? ? ? ? ? ?CORS 規(guī)范中，清楚定義了跨域存取控制的運作方式。

? ? ? ? ? ? ?首先服務(wù)器端需要在響應(yīng)頭中加上如Access-Control-Allow-Origin、Access-Control-Request-Method、Access-Control-Request-Headers?等設(shè)定，來限制服務(wù)器所能接受的來源、請求的方法、可攜帶的頭等等。

? ? ? ? ? ? ?當(dāng)瀏覽器發(fā)送資源請求時，如果是簡單請求便會直接送出請求；若不符合前述條件，則會通過預(yù)檢（Preflighted）請求，確認是否可以通過服務(wù)器的限制，然后才會發(fā)送正式的請求。

? ? ? ? ? ??CORS 除了上述內(nèi)容外，也有關(guān)于 Cookies 的傳送方式，如何允許跨域?qū)懭?Cookies 等內(nèi)容。

? ? ? 代理服務(wù)器

? ? ? ? ? ? ? ??由于 CORS 的頭設(shè)置是在服務(wù)器端，如果服務(wù)器是自己的，那么可以輕易的調(diào)整服務(wù)器設(shè)置，讓前端能取得必要的資源；但如果你請求的是外部 API，就不能要求別人去修改頭設(shè)置吧。

? ? ? ? ? ? ? ?簡單的方法就是通過代理服務(wù)器幫我們獲取資源；由于跨域保護的限制是瀏覽器的規(guī)范，只要不通過瀏覽器發(fā)送請求，自然也就不會有限制。

? ? ? ? ?關(guān)注前端公眾號(前端中心),獲取更多前端技術(shù),共同成長

?

總結(jié)

以上是生活随笔為你收集整理的跨域错误的原因及处理方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。