相信有進行過網站開發，特別是後端開發的人，對下面的錯誤訊息應該不陌生：
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」，中文翻譯為「跨來源資源共用」。
這是什麼意思呢？ 一般來說，如果是向同源的伺服器抓取資料，是可以正常執行的。但如果瀏覽器偵測到你試圖抓取非同源的 request，就會因為違反同源政策而被阻擋。若是這些跨來源的 AJAX 沒有限制的話，就可以透過使用者的瀏覽器，拿到「任意網站」的內容，包含了各種可能有敏感資訊的網站。
為什麼需要有這個機制呢？
很多公司都會有自己的內部網站，假設有駭客知道了這個內部網站的網址，然後在網頁上寫一段 AJAX 去抓取他的資料，這樣駭客就有可能有辦法抓取網站內容！
同源是什麼意思呢？
同源需要包含以下三個條件：
- 相同的通訊協定(protocol)
http://bernice.tw和https://bernice.tw不同源
- 相同的網域(domain)
https://bernice.tw和https://subdomain.bernice.tw不同源
- 相同的埠號(port)
https://bernice.tw和https://bernice.tw:8000不同源
https://bernice.tw/a.html和https://bernice.tw/b.html是同源的！
同源政策出現時該怎麼解決呢？
- 關掉瀏覽器的安全性設置
- 把 fetch mode 設成 no-cors
- 不要用 AJAX 拿資料
參考來源：