ทำไม Localhost ยังคงทำให้เกิดข้อผิดพลาด CORS
คุณรัน frontend บน localhost:3000 คุณรัน backend บน localhost:5000 ทั้งสองแอปทำงานอยู่บนแล็ปท็อปของคุณ แต่คุณกลับเจอข้อผิดพลาด CORS
สิ่งนี้เกิดขึ้นเพราะวิธีที่เบราว์เซอร์กำหนดค่า origin
Origin ประกอบด้วยสามส่วน:
- Protocol
- Domain
- Port
ลองเปรียบเทียบสองสิ่งนี้:
พวกมันใช้ protocol เดียวกัน พวกมันใช้ domain เดียวกัน แต่ใช้ port ที่ต่างกัน
เบราว์เซอร์มองว่า port ที่ต่างกันคือ origin ที่ต่างกัน
เมื่อแอป React ของคุณเรียกใช้งาน API เบราว์เซอร์จะมองว่าเป็นการร้องขอแบบ cross-origin และมองว่าทั้งสองเป็นเอนทิตีที่แยกจากกัน
ทำไมกฎนี้ถึงมีอยู่? เพื่อความปลอดภัย
หากเว็บไซต์สามารถเรียกใช้งาน API ใดๆ ก็ได้ตามใจชอบ เว็บไซต์ที่ประสงค์ร้ายอาจจะสามารถ:
- อ่านข้อมูลธนาคารของคุณ
- เข้าถึง API ส่วนตัว
- สวมรอยทำรายการแทนคุณ
เบราว์เซอร์ใช้ Same-Origin Policy เพื่อป้องกันสิ่งนี้ เว็บไซต์ A ไม่สามารถเข้าถึงเว็บไซต์ B ได้ เว้นแต่เว็บไซต์ B จะอนุญาต
CORS ย่อมาจาก Cross-Origin Resource Sharing มันคือวิธีที่เซิร์ฟเวอร์ของคุณจะบอกกับเบราว์เซอร์ว่า: "ฉันเชื่อถือการร้องขอจาก origin เฉพาะเจาะจงนี้"
คุณสามารถแก้ไขได้โดยการเพิ่ม header ใน backend ของคุณ: Access-Control-Allow-Origin: http://localhost:3000
สิ่งนี้จะบอกเบราว์เซอร์ว่าการร้องขอนั้นปลอดภัย
จุดที่มักจะสร้างความสับสน: คุณเห็นว่าคำร้องขอไปถึง log ของ backend แล้ว แต่ฝั่ง frontend กลับล้มเหลว
สิ่งนี้เกิดขึ้นเพราะ:
- Frontend ส่งคำร้องขอ
- Backend ได้รับคำร้องขอสำเร็จ
- Backend ส่ง response กลับมาสำเร็จ
- เบราว์เซอร์ได้รับ response แต่ทำการบล็อกไว้เนื่องจากกฎความปลอดภัย
ข้อผิดพลาดนี้คือฟีเจอร์ด้านความปลอดภัยของเบราว์เซอร์
เครื่องมืออย่าง Postman หรือ cURL ใช้งานได้เพราะพวกมันไม่ใช่เบราว์เซอร์ จึงไม่ได้บังคับใช้กฎความปลอดภัยของเบราว์เซอร์
เบราว์เซอร์จะเพิกเฉยต่อความจริงที่ว่าทั้งสองแอปทำงานอยู่บนเครื่องเดียวกัน แต่มันจะสนใจแค่เรื่อง origin เท่านั้น