常常我們開發一個全端的網頁，常常就會遇到這個問題，像是在開發階段假設：

後端用 http://localhost:5000

前端用 http://localhost:3000

他們跨了port就會出現CORS的錯誤
可能會像下面這樣的錯誤出現

Access to fetch at ‘http://localhost:5000' from origin http://localhost:3000' has been blocked by CORS policy...

什麼是「跨來源」？

在解釋 CORS 前，先了解同源政策（Same-Origin Policy, SOP）

• 同源 (Same Origin)：兩個網址的協定（Protocol）、網域（Domain）、Port（埠號） 都相同，才算同源
  • 例如：

    • https://example.com:443/page1

    • https://example.com:443/page2

      這兩個是同源

• 跨源 (Cross Origin)：只要有一個不同，就算跨源
  • 例如：

    • http://example.com（協定不同）

    • https://api.example.com（子網域不同）

    • https://example.com:8080（埠號不同）

      這些都屬於跨來源

而 CORS 就是解決跨來源請求的一種機制

瀏覽器為什麼限制我們跨網域請求？

這主要是因為安全性考量

如果沒有這樣的限制，惡意網站就能隨便讀取其他網站的資訊

舉一個情境來說：

• 當你登入了 https://bank.com 🏦，而瀏覽器幫你保存了帳戶資料在Cookies
• 但你不小心打開一個惡意網站 http://evil.com 😈
• 如果沒有同源政策，evil.com 就能直接用JS發送請求到 bank.com，並帶走你的 Cookies，偷偷轉帳或讀取你的帳戶資料做壞事

所以瀏覽器就限制JS只能存取同源的資料，實施了同源政策

CORS 是什麼？

剛剛說瀏覽器限制資料的跨與請求，但是現在的網頁很需要跨與的請求，可能很常前後端就是不同的網域，為了合法的允許特定跨域存取，就需要 CORS 機制

CORS 怎麼運作的？

CORS並不是讓瀏覽器直接放行通過，而是由伺服器用特定的 HTTP Header告訴瀏覽器：哪些來源可以來存取我

舉例來說：

當瀏覽器要請求一個跨域的網址，瀏覽器的Header會帶上一個Origin ，他告訴Server我的來源是誰，然後伺服器會在返回的Header中加上一個Access-Control-Allow-Origin

這也就是等等下面會提的簡單請求 (Simple Request)

Note：是瀏覽器在檢查，不是伺服器！

• 伺服器還是會收到請求
• 但如果伺服器沒有回傳正確的 CORS Header → 瀏覽器會擋掉回應，不讓前端 JS 存取

CORS 種類

簡單請求 (Simple Request)

• 使用GET、POST、HEAD 方法
• Content-Type 限於：text/plain、application/x-www-form-urlencoded、multipart/form-data
• 沒有自訂 Header

流程：

1. 前端發送請求 → 自動帶Origin
2. 伺服器回應Access-Control-Allow-Origin
3. 瀏覽器判斷是否放行

預檢請求 (Preflight Request)

• 使用 PUT、DELETE 等方法
• 或有自訂 Header
• 或 Content-Type 不屬於「簡單類型」

流程：

1. 瀏覽器先發 OPTIONS 預檢
2. 伺服器回應允許的來源、方法、Header
3. 瀏覽器再正式發送請求
4. 瀏覽器判斷是否放行

參考資料

https://medium.com/swf-lab/%E7%B6%B2%E9%A0%81%E9%96%8B%E7%99%BC%E5%B8%B8%E8%A6%8B%E4%B9%8B-cors-%E9%8C%AF%E8%AA%A4%E5%8E%9F%E5%9B%A0%E8%88%87-express-%E8%A7%A3%E6%B1%BA%E8%BE%A6%E6%B3%95-bc5eeedea6dc

https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Guides/CORS