เครื่องมือยอดนิยมบางอย่างสำหรับการจำลองคำขอข้ามแหล่งกำเนิดในสภาพแวดล้อมการพัฒนาท้องถิ่น

ทำความเข้าใจกับ CORS

การแบ่งปันทรัพยากรข้ามแหล่งกำเนิด (CORS) เป็นกลไกความปลอดภัยที่ใช้ในเบราว์เซอร์ที่ จำกัด เว็บแอปพลิเคชันที่ทำงานบนแหล่งกำเนิดหนึ่ง (โดเมน, โปรโตคอล, พอร์ต) จากการเข้าถึงทรัพยากรบนแหล่งกำเนิดที่แตกต่างกัน CORS ทำงานโดยเซิร์ฟเวอร์ที่ส่งส่วนหัวกลับเช่น `การควบคุมการควบคุม-Ollow-Origin` เพื่อระบุว่าโดเมนใดที่ได้รับอนุญาตให้เข้าถึงทรัพยากร เบราว์เซอร์บังคับใช้สิ่งนี้โดยส่งคำขอ "preflight" (คำขอตัวเลือก HTTP) สำหรับการโทรข้ามแหล่งกำเนิดบางประเภทเพื่อตรวจสอบสิทธิ์ก่อนที่จะทำการร้องขอจริง การควบคุมส่วนหัวของ CORS ไม่เพียง แต่อนุญาตให้ใช้ต้นกำเนิดเท่านั้น แต่ยังสามารถใช้วิธี HTTP และส่วนหัวได้และสามารถส่งข้อมูลรับรองเช่นคุกกี้ได้หรือไม่

ความท้าทายในการพัฒนาท้องถิ่น

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

เครื่องมือและวิธีการจำลองหรือข้าม CORS ในพื้นที่

1. พร็อกซีเซิร์ฟเวอร์ท้องถิ่น

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

-เซิร์ฟเวอร์การพัฒนาที่มีการสนับสนุนพร็อกซีในตัว: เครื่องมือการพัฒนาส่วนหน้ามากมายเช่น Vite, Webpack Dev Server หรือสร้างการสนับสนุนแอป React การกำหนดค่าพร็อกซี ตัวอย่างเช่นการสร้างแอป React ช่วยให้นักพัฒนากำหนดพร็อกซีใน `package.json` หรือ` setupproxy.js` ที่ส่งต่อการโทร API ไปยังเซิร์ฟเวอร์อื่นที่ทำงานบนพอร์ตหรือโดเมนอื่น ด้วยวิธีนี้เบราว์เซอร์คิดว่ามันกำลังสื่อสารกับแหล่งกำเนิดเดียวกันเนื่องจากมีการร้องขอไปยังเซิร์ฟเวอร์ Dev ซึ่งจะส่งต่อไปยังเซิร์ฟเวอร์ API เป้าหมาย

-เซิร์ฟเวอร์พร็อกซีแบบสแตนด์อโลน: เครื่องมือเช่น http-proxy-middleware (สำหรับ node.js) หรือพร็อกซีท้องถิ่นเช่น Nginx ที่กำหนดค่าไว้ในเครื่องท้องถิ่นสามารถทำหน้าที่เป็นพร็อกซีเพื่อขอเส้นทางและเพิ่มส่วนหัว CORS ที่จำเป็น นักพัฒนาสามารถกำหนดค่าเซิร์ฟเวอร์เหล่านี้เพื่อปรับเปลี่ยนการตอบสนองได้ทันทีเพื่อรวม `การควบคุมการควบคุม-Origin: *` หรือส่วนหัวอื่น ๆ ที่เหมาะสม

2. สำเนา API ท้องถิ่นที่เปิดใช้งาน CORS

การใช้อินสแตนซ์ท้องถิ่นของ API ที่รองรับ CORS เป็นอีกวิธีหนึ่งที่มีประสิทธิภาพ ด้วยการใช้นักเทียบท่าหรือการตั้งค่าในท้องถิ่นนักพัฒนาจะเรียกใช้ API บนเครื่องจักรด้วย CORS ที่เปิดใช้งานในโหมดการพัฒนาซึ่งช่วยให้ส่วนหน้าทำงานบน LocalHost เพื่อสื่อสารได้อย่างอิสระโดยไม่มีข้อ จำกัด สิ่งนี้มีประโยชน์ในการควบคุมที่สมบูรณ์และไม่มีการพึ่งพาสภาพแวดล้อมภายนอก

3. ส่วนขยายเบราว์เซอร์เพื่อการพัฒนา

สำหรับการทดสอบอย่างรวดเร็วหรือการดีบักนักพัฒนาหลายคนใช้ส่วนขยายเบราว์เซอร์ที่ปิดการใช้งานหรือแก้ไขพฤติกรรม CORS ในเบราว์เซอร์ชั่วคราว เครื่องมือเหล่านี้ควรใช้ในการพัฒนาเท่านั้นไม่เคยผลิต:

- Cors Unblock for Chrome: ส่วนขยายนี้ปรับเปลี่ยนส่วนหัวคำขอและเปิดใช้งานคำขอข้ามแหล่งกำเนิดโดยการฉีดส่วนหัวที่จำเป็นในการตอบสนองเพื่อข้ามการบังคับใช้ CORS ของเบราว์เซอร์

- CORS ทุกที่สำหรับ Firefox: คล้ายกับส่วนขยายของ Chrome มันสลับ CORS ข้อ จำกัด ในการเปิดและปิดช่วยให้นักพัฒนาทดสอบการโทรข้ามโดยไม่เปลี่ยนการกำหนดค่าเซิร์ฟเวอร์

- เมนูการพัฒนาของ Safari: Safari อนุญาตให้ปิดการใช้งานการ จำกัด การข้ามแหล่งกำเนิดผ่านเมนูชั่วคราวซึ่งมีประโยชน์สำหรับผู้ใช้ Mac ที่ทำการทดสอบในท้องถิ่น

4. การรันเว็บเซิร์ฟเวอร์ท้องถิ่นแทนการเปิดไฟล์

สาเหตุหนึ่งสาเหตุของข้อผิดพลาดของ CORS คือการโหลดไฟล์โดยตรงด้วย `file: //` โปรโตคอลในเบราว์เซอร์ บทช่วยสอนและคำถามและคำตอบหลายข้อชี้ให้เห็นว่าการเปิดหน้า HTML โดยตรงโดยไม่ต้องใช้เว็บเซิร์ฟเวอร์ทำให้เกิดข้อผิดพลาดเนื่องจากเบราว์เซอร์บล็อกการดำเนินการหลายอย่างเพื่อความปลอดภัย ดังนั้นการรันเซิร์ฟเวอร์ HTTP ในท้องถิ่นขั้นต่ำโดยใช้เครื่องมือเช่นเซิร์ฟเวอร์ HTTP ในตัวของ Python (`python3 -m http.server`), แพ็คเกจ http-server` ของ Node ของ Node

5. การแก้ไขส่วนหัวการตอบกลับเซิร์ฟเวอร์

เมื่อพัฒนา API หรือบริการแบ็กเอนด์ของคุณเองการเพิ่มส่วนหัว CORS จะทำได้โดยการรวมมิดเดิลแวร์หรือการกำหนดค่าเว็บเซิร์ฟเวอร์เพื่อรองรับ CORS เฟรมเวิร์กแบ็กเอนด์ยอดนิยมและภาษาได้กำหนดวิธีการเปิดใช้งาน CORS:

- node.js/express: การใช้แพ็คเกจมิดเดิลแวร์ `Cors` ช่วยลดความซับซ้อนของการเพิ่มส่วนหัว CORS

- ASP.NET Web API: รองรับคุณลักษณะเช่น `[enableCors]` ที่อนุญาตให้ระบุต้นกำเนิดวิธีการและส่วนหัวที่อนุญาตสำหรับคำขอข้ามต้นกำเนิด

-Django: มิดเดิลแวร์เช่น `django-cors-headers` ใช้เพื่อเปิดใช้งาน CORS รองรับในพื้นที่

6. บายพาส CORS กับพร็อกซีสาธารณะหรือบุคคลที่สาม

บริการออนไลน์บางอย่างเช่น Beeceptor อนุญาตให้นักพัฒนาทดสอบ API และบายพาส CORS โดยการกำหนดเส้นทางผ่านเซิร์ฟเวอร์พร็อกซี บริการเหล่านี้เพิ่มส่วนหัว CORS ที่เหมาะสมดังนั้นเบราว์เซอร์จึงยอมรับคำตอบ วิธีการนี้มีประโยชน์สำหรับการดีบักอย่างรวดเร็วเมื่อการตั้งค่าในท้องถิ่นไม่สามารถทำได้ แต่ควรใช้อย่างระมัดระวังและไม่ได้อยู่ในสภาพแวดล้อมการผลิต

-

สรุปเครื่องมือและเทคนิคยอดนิยม

- พร็อกซ์เซิร์ฟเวอร์ Dev: การใช้ความสามารถของพร็อกซีในเครื่องมือเช่น Vite, สร้างแอป React, Webpack Dev Server
-เซิร์ฟเวอร์พร็อกซีท้องถิ่น: http-proxy-middleware ใน node.js, nginx กำหนดค่าเป็นพร็อกซี
- API ท้องถิ่นที่เปิดใช้งาน CORS: เรียกใช้คอนเทนเนอร์ Docker หรืออินสแตนซ์ API ท้องถิ่นที่กำหนดค่าสำหรับการพัฒนาด้วย CORS
- ส่วนขยายของเบราว์เซอร์: CORS Unblock (Chrome), CORS ทุกที่ (Firefox), Safari ปิดการ จำกัด ข้อ จำกัด ข้ามต้นกำเนิด
-เซิร์ฟเวอร์ HTTP ในพื้นที่: การเรียกใช้ `http.server` ของ Python,` http-server` ของ Node หรือ Live-Server แทนที่จะใช้ `file: //` URL
-Backend Framework Middlework: `cors` แพ็คเกจสำหรับ node.js,` [enableCors] `ใน ASP.NET Web API,` Django-Cors-Headers` สำหรับ Django
- บริการพร็อกซีของบุคคลที่สาม: Beeceptor และบริการที่คล้ายกันเพื่อข้าม Cors ชั่วคราว