การแก้ไข: ไม่มีข้อผิดพลาดส่วนหัว access-control-allow-origin ใน Angular

หนึ่งในข้อความแสดงข้อผิดพลาดที่พบบ่อยที่สุดที่นักพัฒนา Angular สามารถพบได้ในการทำงานในแต่ละวันคือ: ไม่มีส่วนหัว access-control-allow-origin บนทรัพยากรที่ร้องขอ.

นี่ไม่ใช่ปัญหาเชิงมุมเฉพาะ แต่เป็น CORS (ปัญหาส่วนหัวของการแบ่งปันทรัพยากรข้ามต้นทาง) อาจหมายความว่าเซิร์ฟเวอร์ส่วนหลังได้รับการกำหนดค่าให้ทำงานบนพอร์ตหรือโดเมนอื่น

---

ฉันจะแก้ไขข้อผิดพลาด No access-control บน Windows 10 ได้อย่างไร

1. ทำการเปลี่ยนแปลงที่ระดับเซิร์ฟเวอร์

หากคุณมีสิทธิ์เข้าถึงเซิร์ฟเวอร์ ให้เปิดใช้งานคำขอ CROS โดยเพิ่ม การเข้าถึง-การควบคุม-อนุญาต-ที่มา: * หัวข้อ. หลังจากนั้นกำหนดค่า คอร์ รายการภายใต้, system.webServer ใน web.config ไฟล์ดังตัวอย่างด้านล่าง

• ”1.0″?
• เปิดใช้งาน =“จริง”>
• ต้นทาง=“ https://someorigin.domain.com”>
• วิธี=“รับ”/>
• วิธี="ศีรษะ"/>
• </system.webServer>

ที่นี่ คอร์ จะอนุญาต GET และ ศีรษะ คำขอจาก https://someorigin.domain.com/.

นอกจากนี้ หากคุณใช้ IIS (บริการข้อมูลทางอินเทอร์เน็ต) คุณจะต้องดาวน์โหลด โมดูล IIS CORS.

โปรดใช้ความระมัดระวังในการระบุโดเมนหรือรายการโดเมนแทน * มิฉะนั้น คำขอข้ามต้นทางไปยังเซิร์ฟเวอร์จะเปิดใช้งานได้จากทุกที่

บน Apacheในไฟล์กำหนดค่า คุณต้องเพิ่มบรรทัด ชุดส่วนหัว Access-Control-Allow-Origin '*' อีกครั้ง เป็นการดีที่จะแทนที่ '*' ด้วยรายชื่อแหล่งที่มาของคำขอ

---

2. เรียกใช้พร็อกซีเซิร์ฟเวอร์ของคุณเอง

1. ขั้นแรก เราจะสร้างไฟล์การกำหนดค่าพร็อกซีในโฟลเดอร์รูท Angular ที่เรียกว่า src/proxy.conf.json, และเขียนโค้ดต่อไปนี้ลงไป:
   • {"/ API":
   • "เป้าหมาย": http://localhost: 6000","ปลอดภัย": เท็จ }
   • }
2. ประการที่สอง ใน อังular.jsonไฟล์เพิ่ม proxyConfigตัวเลือกใน เสิร์ฟ เป้าหมาย:
   • "เสิร์ฟ": {
   • "ผู้สร้าง":" ",
     
   • "ตัวเลือก":{"proxyConfig":"src/proxy.conf.json"}
     
   • }
3. ตอนนี้เรียกใช้การกำหนดค่าปัจจุบันด้วย with ง เสิร์ฟ คำสั่ง

พร็อกซีเซิร์ฟเวอร์จะส่งต่อคำขอของคุณไปยังเซิร์ฟเวอร์ระยะไกล ต่อไป เราจะมาดูวิธีกำหนดค่าพร็อกซีเซิร์ฟเวอร์

คำขอข้อมูลใน Angular เป็นการเรียก API ไปยัง localhost บนพอร์ต 4200 เช่นตำแหน่งนี้:

• http://localhost: 4200/api/datareq.

อย่างไรก็ตาม จากตัวอย่างข้างต้น เราถือว่าข้อมูลที่ร้องขออยู่ที่ สถานที่นี้:

• http://localhost: 6000/api/datareq.

---

สนใจโซลูชั่นพร็อกซี่ที่ดีหรือไม่? ตรวจสอบรายชื่อเครื่องมือเฉพาะนี้

---

3. ดisable the Same Origin Policy ในเบราว์เซอร์ของคุณ

บันทึก: ไม่แนะนำให้ใช้วิธีนี้เนื่องจากอาจทำให้เบราว์เซอร์ของคุณ (และระบบของคุณ) มีความเสี่ยงด้านความปลอดภัยที่สำคัญ

หากทุกอย่างไม่ได้ผล คุณสามารถใช้วิธีปิดการใช้งาน Same Origin Policy ในเบราว์เซอร์ อย่างไรก็ตาม โปรดใช้ความระมัดระวัง เนื่องจากจะทำให้เบราว์เซอร์ของคุณ (และระบบของคุณ) มีความเสี่ยงด้านความปลอดภัยที่สำคัญ

สำหรับ Google Chromeใน Windows 10 ให้เปิด Command Prompt ในฐานะผู้ดูแลระบบ และเรียกใช้คำสั่งต่อไปนี้:

C: ไฟล์โปรแกรม (x86)GoogleChromeApplicationchrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp.

สรุปแล้ว, ไม่มีส่วนหัว access-control-allow-origin บนทรัพยากรที่ร้องขอ ข้อความแสดงข้อผิดพลาดเป็นปัญหาฝั่งเซิร์ฟเวอร์

สำหรับนักพัฒนา Angular การแก้ไขการกำหนดค่าเซิร์ฟเวอร์หรือการใช้พร็อกซีเซิร์ฟเวอร์ควรทำงานได้ดี

บอกเราว่าคุณคิดอย่างไรกับคู่มือนี้ในส่วนความคิดเห็นด้านล่าง

---

---