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

在本程式碼研究室中，瞭解相同來源在擷取資源時的運作方式。

設定：從相同來源擷取網頁

示範內容是在 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，請參閱「安全地共用跨源資源」。