สาเหตุของ JavaScript ข้ามโดเมนคืออะไร?

เหตุผลของ JavaScript ข้ามโดเมนคือเนื่องจากข้อจำกัดของนโยบายเบราว์เซอร์ที่คล้ายคลึงกัน js ในชื่อโดเมนปัจจุบันสามารถอ่านได้เฉพาะแอตทริบิวต์ของหน้าต่างในโดเมนเดียวกันเท่านั้น ดังนั้นข้ามโดเมนจึงเกิดขึ้น นโยบายที่มีต้นกำเนิดเดียวกันหมายความว่าเพื่อให้มั่นใจในความปลอดภัยของข้อมูลผู้ใช้และป้องกันไม่ให้เว็บไซต์ที่เป็นอันตรายขโมยข้อมูล เบราว์เซอร์จะห้ามการโต้ตอบ JS ระหว่างโดเมนที่ต่างกัน

วิธีเริ่มต้นใช้งาน VUE3.0 อย่างรวดเร็ว: ป้อน

สภาพแวดล้อมการทำงานของบทช่วยสอนนี้: ระบบ Windows 10, JavaScript เวอร์ชัน 1.8.5, คอมพิวเตอร์ Dell G3

สาเหตุของ JavaScript ข้ามโดเมนคืออะไร

ปัญหาข้ามโดเมนถูกจำกัดโดยนโยบายต้นกำเนิดเดียวกันของเบราว์เซอร์ js ของชื่อโดเมนปัจจุบันสามารถอ่านได้เฉพาะแอตทริบิวต์ของหน้าต่างในโดเมนเดียวกัน

เนื่องจากข้อจำกัดนโยบายที่มีต้นกำเนิดเดียวกันของเบราว์เซอร์ นโยบายที่มีต้นกำเนิดเดียวกันถือเป็นหลักการและเป็นฟังก์ชันความปลอดภัยขั้นพื้นฐานที่สุดของเบราว์เซอร์ หากไม่มีนโยบายที่มีต้นกำเนิดเดียวกัน ฟังก์ชันปกติของเบราว์เซอร์อาจได้รับผลกระทบ อาจกล่าวได้ว่าเว็บถูกสร้างขึ้นบนพื้นฐานของนโยบายที่มีต้นกำเนิดเดียวกัน เบราว์เซอร์เป็นเพียงการนำนโยบายที่มีต้นกำเนิดเดียวกันไปใช้ นโยบายที่มีต้นกำเนิดเดียวกันป้องกันไม่ให้สคริปต์ JavaScript จากโดเมนหนึ่งโต้ตอบกับเนื้อหาจากโดเมนอื่น สิ่งที่เรียกว่าต้นทางเดียวกัน (นั่นคือ ในโดเมนเดียวกัน) หมายความว่าทั้งสองเพจมีโปรโตคอล โฮสต์ และหมายเลขพอร์ตเดียวกัน

พูดง่ายๆ ก็คือ นโยบายที่มีต้นกำเนิดเดียวกันหมายความว่า เพื่อให้มั่นใจในความปลอดภัยของข้อมูลผู้ใช้และป้องกันเว็บไซต์ที่เป็นอันตรายจากการขโมยข้อมูล เบราว์เซอร์จะห้ามไม่ให้มีการโต้ตอบ JS ระหว่างโดเมนที่ต่างกัน สำหรับเบราว์เซอร์ ตราบใดที่ชื่อโดเมน โปรโตคอล และพอร์ตใดรายการหนึ่งแตกต่างกัน นโยบายที่มีต้นกำเนิดเดียวกันจะถูกทริกเกอร์ ดังนั้นจึงจำกัดการโต้ตอบระหว่างกันดังต่อไปนี้:

IndexDB

ไม่สามารถอ่านได้;

ไม่สามารถรับ DOM ได้

3. ไม่สามารถส่งคำขอ AJAX ได้

คำจำกัดความที่เข้มงวดยิ่งขึ้นของข้ามโดเมนคือ: ตราบใดที่โปรโตคอล ชื่อโดเมน และพอร์ตต่างกัน ก็ถือเป็นโดเมนข้ามโดเมน

โซลูชันข้ามโดเมน

JSONP: คุณต้องเพิ่ม dataType: "jsonp" ในวิธีการร้องขอ // รูปแบบข้อมูลถูกตั้งค่าเป็น jsonp, jsonp: "callback", // Jquery สร้างชื่อของพารามิเตอร์การตรวจสอบ

1, dataType, ต้องตั้งค่าพารามิเตอร์นี้เป็น jsonp

2 jsonp ค่าของพารามิเตอร์นี้จะต้องได้รับการตกลงกับเซิร์ฟเวอร์

nginx Reverse proxy

webpack กำหนดค่าพร็อกซีย้อนกลับ: ใช้ scaffolding devServer โดยตรงเพื่อกำหนดค่าพร็อกซีย้อนกลับเพื่อแก้ไขปัญหาข้ามโดเมนใน กระบวนการพัฒนาการ

แบ่งปันทรัพยากรข้ามโดเมน (CORS)

Nodejs ข้ามโดเมน: ใช้ nodejs ภายในเครื่องเพื่อตั้งค่าเซิร์ฟเวอร์ เรียกเซิร์ฟเวอร์แบ็กเอนด์ผ่านเซิร์ฟเวอร์นั้น ส่งคืนข้อมูล จากนั้นส่งคืนไปยังเซิร์ฟเวอร์ส่วนหน้า ไม่มีการข้าม -domain

WebSocket protocol ข้ามโดเมน

ผ่าน JSONP

ทำความเข้าใจด้วยตัวเอง: JSONP ใช้แท็กสคริปต์ เพื่อให้ได้รับแอตทริบิวต์ข้ามโดเมน คุณสามารถใช้ get คำขอได้เท่านั้น เพื่อรับข้อมูลที่คุณต้องการ

หลักการ JSONP: ส่วนหน้าจะกำหนดวิธีการที่ดีและส่งผ่านไปยังส่วนหลังผ่านแอตทริบิวต์ src มันถูกส่งผ่านไปยังส่วนหน้า ส่วนหน้าใช้เป็นวิธีการโทร

เป็น

หลัก โดยส่วนใหญ่จะเพิ่มการโทรกลับในวิธีการร้องขอแบบห่อหุ้ม

ข้างต้นคือรายละเอียดเหตุผลของเนื้อหา JavaScript ข้ามโดเมน โปรดอ่านบทความอื่น ๆ ที่เกี่ยวข้องบนเว็บไซต์ php Chinese สำหรับข้อมูลเพิ่มเติม!