ใน Codelab นี้ให้ดูวิธีการทํางานของต้นทางเดียวกันเมื่อดึงข้อมูลทรัพยากร
ตั้งค่า: ดึงข้อมูลหน้าเว็บจากต้นทางเดียวกัน
การสาธิตนี้โฮสต์ที่ https://same-origin-policy-fetch.glitch.me
หน้าเว็บง่ายๆ นี้ใช้ fetch เพื่อโหลดทรัพยากรจาก https://same-origin-policy-fetch.glitch.me/fetch.html เนื่องจาก index.html และ fetch.html มีต้นทางเดียวกัน คุณจึงควรเห็น 200 ปรากฏในตัวอย่างแบบเรียลไทม์
1. ดึงหน้าเว็บจากต้นทางอื่น
ลองเปลี่ยน URL การดึงข้อมูลเป็น https://www.google.com
คุณเห็นอะไรในตัวอย่างแบบสด
เบราว์เซอร์ควรบล็อกคำขอดึงข้อมูลเนื่องจากคุณขอทรัพยากรจากต้นทางอื่น ซึ่งหมายความว่าผู้โจมตีจะอ่านทรัพยากรแบบข้ามต้นทางไม่ได้แม้ว่าจะเข้าควบคุมเบราว์เซอร์ของผู้ใช้แล้วก็ตาม
2. ดึงข้อมูลทรัพยากรแบบข้ามต้นทาง
ลองเปลี่ยน URL การดึงข้อมูลเป็น https://api.thecatapi.com/v1/images/search
คุณเห็นอะไรในตัวอย่างแบบสด
URL ที่จะดึงข้อมูลมีที่มาอื่น แต่คุณควรจะเห็นรหัสสถานะ 200 เหตุผล เว็บแอปพลิเคชันสมัยใหม่มักจะขอทรัพยากรแบบข้ามต้นทางเพื่อโหลดสคริปต์ของบุคคลที่สามหรือค้นหาปลายทาง API เรามีกลไกที่เรียกว่า CORS (กลไกการแชร์ทรัพยากรข้ามต้นทาง) เพื่อแจ้งให้เบราว์เซอร์ทราบว่าการโหลดทรัพยากรแบบข้ามต้นทางอนุญาตให้โหลดได้ โปรดดูที่หัวข้อแชร์ทรัพยากรข้ามต้นทางอย่างปลอดภัยสำหรับข้อมูลเพิ่มเติมเกี่ยวกับ CORS