相同來源政策與擷取；擷取要求

在這個程式碼研究室中，瞭解同源網域在擷取資源時的運作方式。

設定：從同源擷取網頁

這個示範程式會在 https://same-origin-policy-fetch.glitch.me 中代管。這個簡單的網頁使用 fetch 載入 https://same-origin-policy-fetch.glitch.me/fetch.html 中的資源。由於 index.html 和 fetch.html 共用相同的來源，您應該會在即時預覽畫面中看到 200。

1. 從不同來源擷取網頁

請嘗試將擷取網址變更為 https://www.google.com。即時預覽畫面顯示的內容為何？

由於您要求的是來自不同來源的資源，因此瀏覽器應會封鎖擷取要求。也就是說，即使入侵者已取得使用者瀏覽器的控制權，也無法讀取跨來源資源。

2. 擷取跨來源資源

請嘗試將擷取網址變更為 https://api.thecatapi.com/v1/images/search。即時預覽畫面顯示的內容為何？

擷取網址是不同的來源，但您應該會看到狀態碼 200。異動原因 現代化的網頁應用程式經常要求跨來源資源，以便載入第三方指令碼或查詢 API 端點。為因應這些用途，我們提供了一種稱為 CORS (跨來源資源共享) 的機制，可告知瀏覽器允許載入跨來源資源。如要進一步瞭解 CORS，請參閱「安全地共用跨來源資源」。