前端三十｜22. [FE] 為什麼跨域請求會產生錯誤？如何處理？

如果讀者您在開發、建置網站的過程中，有嘗試透過任何套件、框架，或是瀏覽器的 fetch、XHR 串接外部 API，相信對於「跨域請求」這個名詞一定不會陌生，更別說是那個怵目驚心的 CORS 錯誤訊息了；今天我們就來討論跨域問題的原因，以及解決方法。

本系列文已經重新編校彙整編輯成冊，並正式出版囉！

《前端三十：從 HTML 到瀏覽器渲染的前端開發者必備心法》好評販售中！

喜歡我文章內容的讀者們，歡迎您前往購買支持！

跨域請求

如果前述的狀況讀者沒有遇過，可以嘗試著在瀏覽器 console 頁輸入下列的程式碼：

const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    console.log(xhr.status === 200 ? xhr.responseText : 'error')
  }
}
xhr.open('GET', 'https://google.com')
xhr.send()

這段程式碼透過瀏覽器的 XMLHttpRequest，對 Google 送出 Request；而得到的結果如圖所示：

這就是很常聽到的跨域請求問題，當開發者透過 JavaScript 針對不同於當前位置的來源發送請求，這個請求的回應就會被瀏覽器攔截掉，不交給 JavaScript 處理。這邊的「不同來源」，指的是目標資源與當前網頁的網域（domain）、通訊協定（protocol）或通訊埠（port）只要有任一項不同，就算是不同來源。例如以下幾個例子：

假設目前使用者在：https://example.com ：
[O] https://example.com/test -> 同域
[X] https://m.example.com -> 網域不同
[X] https://example.com:3000 -> PORT 不同
[X] http://example.com -> 通訊協定不同

理解什麼是跨域了，那為什麼瀏覽器要這麼雞婆把跨域請求資源擋掉呢？