相信有進行過網站開發，特別是後端開發的人，對下面的錯誤訊息應該不陌生：

request has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

這篇就來談談為什麼 CORS 政策會出現的原因！CORS 的全名是「Cross-Origin Resource Sharing」，中文翻譯為「跨來源資源共用」。

• CORS 是什麼？

  一般來說，如果是向同源的伺服器抓取資料，是可以正常執行的。但如果瀏覽器偵測到你試圖抓取非同源的 request，就會因為違反同源政策而被阻擋。若是這些跨來源的 AJAX 沒有限制的話，就可以透過使用者的瀏覽器，拿到「任意網站」的內容，包含了各種可能有敏感資訊的網站。

• 為什麼需要有這個機制呢？

  很多公司都會有自己的內部網站，假設有駭客知道了這個內部網站的網址，然後在網頁上寫一段 AJAX 去抓取他的資料，這樣駭客就有可能有辦法抓取網站內容！

• 同源是什麼意思呢？

  同源需要包含以下三個條件：

  1. 相同的通訊協定(protocol)
  • http://bernice.tw和https://bernice.tw不同源
  2. 相同的網域(domain)
  • https://bernice.tw和https://subdomain.bernice.tw不同源
  3. 相同的埠號(port)
  • https://bernice.tw和https://bernice.tw:8000不同源

  https://bernice.tw/a.html和https://bernice.tw/b.html是同源的！

• 同源政策出現時該怎麼解決呢？

  1. 關掉瀏覽器的安全性設置
  2. 把 fetch mode 設成 no-cors
  3. 不要用 AJAX 拿資料

參考來源：

• https://blog.huli.tw/2021/02/19/cors-guide-1/