瀏覽器基於安全性的考量,在應用fetch API或是XHR(XMLHttpRequest)請求資源時,必須遵守 同源政策(Same-Origin Policy) 。
只有網站與呼叫的API同源時,才能成功存取資源,而不受限制。
相反地,如果網站與呼叫的API非同源,即使成功送出了request,瀏覽器也收到了response,瀏覽器會因為同源政策,拒絕將資源回傳給javaScript。
同源基本上得遵守三個條件:
只要有一個不同都是非同源,比較以下的例子:
原網址
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)
非同源的請求就是進行跨來源存取,基於同源政策,瀏覽器不允許這樣的行為。
但我們還是得仰賴許多非同源的API,(實際上前幾天的範例也用了很多。)
這時可以使用 CORS(跨來源資源共用,Cross-Origin Resource Sharing) 標頭,就能讓瀏覽器允許跨來源存取的情況。
在同源政策下,藉由server在response裡加入Access-Control-Allow-Origin
這個header,瀏覽器就會讀取這些資訊,讓程式接收到response。
網路應用程式所使用的 API 除非使用 CORS 標頭,否則只能請求與應用程式相同網域的 HTTP 資源。
跨來源資源共用(Cross-Origin Resource Sharing,簡稱 CORS)機制提供了網頁伺服器跨網域的存取控制,增加跨網域資料傳輸的安全性。
如果想要深入了解很推薦這兩篇文章:
輕鬆理解 Ajax 與跨來源請求 → 概念很完整,包含整個非同步請求的架構。
[教學] CORS 是什麼? 如何設定 CORS? | Shubo 的程式教學筆記→ 詳細說明CORS的使用方法
【如內文有誤還請不吝指教>< 謝謝閱覽至此的各位:D】
參考資料:
-----正文結束-----
今天的題目好像不是那麼常見,但沒概念的話,接API會很難debug,所以還是幫自己簡單整理了一下。
明天寫JSOP。