เข้าใจ CORS ใน Express ให้ถูก: กติกา Origin ของ Browser ไม่ใช่ระบบ Login
อธิบาย preflight, allowed origins, credentials และเหตุผลที่ CORS ไม่สามารถแทน authentication หรือ authorization พร้อมแนวทางตั้งค่า Express อย่างปลอดภัย
ภาพรวม
CORS ใน Express ไม่ใช่ระบบ login แต่เป็นกติกาของ browser 🌐
เวลา frontend อยู่คนละ domain กับ API browser จะถามว่า origin นี้เรียก API ได้ไหม คำตอบนั้นถูกควบคุมผ่าน CORS headers
หลายคนเจอ CORS error แล้วคิดว่า backend พัง จริง ๆ server อาจตอบได้ แต่ browser ไม่ยอมให้ JavaScript อ่าน response เพราะ header ไม่อนุญาต
ใน Express มักใช้ package cors app.use(cors({ origin: "https://app.example.com" }))
อย่าเปิด origin เป็น * แบบไม่คิด สำหรับ API public บางแบบอาจพอได้ แต่ถ้ามี cookie, token หรือข้อมูลผู้ใช้ ควรกำหนด origin ให้ชัด
CORS ไม่ได้กันคนยิง API จาก Postman หรือ curl มันเป็นกลไกของ browser ดังนั้นอย่าใช้ CORS แทน authentication หรือ authorization
ถ้าต้องส่ง cookie ข้าม origin ต้องตั้ง credentials: true และฝั่ง frontend ต้องส่ง credentials ด้วย พร้อมตั้ง SameSite/Secure ให้เหมาะ
preflight request คือ OPTIONS request ที่ browser ส่งมาก่อน เมื่อ request มี header หรือ method บางแบบ server ต้องตอบให้ถูก ไม่งั้น request หลักจะไม่ถูกส่ง
ปัญหาที่เจอบ่อย dev ใช้ localhost:3000 API อยู่ localhost:4000 พอขึ้น production domain เปลี่ยนแล้วลืมแก้ allowlist
วิธีจัดการที่ดี อ่าน allowed origins จาก environment แยก dev/staging/production และ log origin ที่ถูก reject ตอน debug
CORS ที่ดีคือเปิดเท่าที่ frontend ต้องใช้ ไม่กว้างจนเสี่ยง ไม่แคบจนทีม dev ทำงานไม่ได้ เข้าใจจุดนี้แล้ว error สีแดงใน browser จะน่ากลัวน้อยลง 🙂
แนวทางนำไปใช้
- นำแนวคิดจากโพสต์นี้ไปทดลองกับงานจริงของคุณ
- แยกเป็นขั้นตอนเล็ก ๆ แล้วทำทีละส่วน
- บันทึกผลลัพธ์และสิ่งที่เรียนรู้เพื่อต่อยอด
สรุป
อธิบาย preflight, allowed origins, credentials และเหตุผลที่ CORS ไม่สามารถแทน authentication หรือ authorization พร้อมแนวทางตั้งค่า Express อย่างปลอดภัย