在本程式碼研究室中，瞭解同源擷取資源的運作方式。
設定：從相同來源擷取網頁
示範影片託管於 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，請參閱安全共用跨來源資源。