ในโค้ดแล็บนี้ ให้ดูว่าต้นทางเดียวกันทำงานอย่างไรเมื่อดึงข้อมูลทรัพยากร
ตั้งค่า: ดึงข้อมูลหน้าเว็บจากต้นทางเดียวกัน
เดโมนี้โฮสต์อยู่ที่ 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 (Cross Origin Resource Sharing) เพื่อบอกเบราว์เซอร์ว่าอนุญาตให้โหลดทรัพยากรข้ามโดเมน ดูข้อมูลเพิ่มเติมเกี่ยวกับ CORS ได้ที่หัวข้อแชร์ทรัพยากรข้ามโดเมนอย่างปลอดภัย