Same-Origin Policy 同源政策

瀏覽器基於安全性的考量，在應用fetch API或是XHR(XMLHttpRequest)請求資源時，必須遵守 同源政策(Same-Origin Policy) 。

只有網站與呼叫的API同源時，才能成功存取資源，而不受限制。

相反地，如果網站與呼叫的API非同源，即使成功送出了request，瀏覽器也收到了response，瀏覽器會因為同源政策，拒絕將資源回傳給javaScript。

Same-Origin 同源

同源基本上得遵守三個條件：

1. protocol 通訊協定相同－如http和https是兩種協定，所以為非同源。
2. port 埠號相同 - HTTP的預設埠號是 80; HTTPS 的預設埠號是 443。
3. domain 網域/主機位置相同

只要有一個不同都是非同源，比較以下的例子：

原網址
https://ithelp.ithome.com.tw/questions

比較
https://ithelp.ithome.com.tw/questions?tab=hot → 同源 (O)
http://ithelp.ithome.com.tw/questions → 協定不同，非同源 (X)
https://ithelp.ithome.com.tw:8080/questions → 埠號不同，非同源 (X)
https://cannothelp.ithome.com.tw/questions → 網域不同，非同源 (X)

Cross-origin network access 跨來源存取

非同源的請求就是進行跨來源存取，基於同源政策，瀏覽器不允許這樣的行為。

但我們還是得仰賴許多非同源的API，(實際上前幾天的範例也用了很多。)

這時可以使用 CORS(跨來源資源共用，Cross-Origin Resource Sharing) 標頭，就能讓瀏覽器允許跨來源存取的情況。

CORS

在同源政策下，藉由server在response裡加入Access-Control-Allow-Origin這個header，瀏覽器就會讀取這些資訊，讓程式接收到response。

網路應用程式所使用的 API 除非使用 CORS 標頭，否則只能請求與應用程式相同網域的 HTTP 資源。
跨來源資源共用（Cross-Origin Resource Sharing，簡稱 CORS）機制提供了網頁伺服器跨網域的存取控制，增加跨網域資料傳輸的安全性。

如果想要深入了解很推薦這兩篇文章：

• 輕鬆理解 Ajax 與跨來源請求 → 概念很完整，包含整個非同步請求的架構。

• [教學] CORS 是什麼? 如何設定 CORS? | Shubo 的程式教學筆記→ 詳細說明CORS的使用方法

【如內文有誤還請不吝指教>< 謝謝閱覽至此的各位:D】

參考資料：

• 同源政策 (Same-origin policy) - Web 安全 | MDN
• 輕鬆理解 Ajax 與跨來源請求
• [教學] CORS 是什麼? 如何設定 CORS? | Shubo 的程式教學筆記

-----正文結束-----

今天的題目好像不是那麼常見，但沒概念的話，接API會很難debug，所以還是幫自己簡單整理了一下。
明天寫JSOP。