ใน 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 ที่หัวข้อแชร์ทรัพยากรแบบข้ามต้นทางอย่างปลอดภัย