Cross-Origin Resource Sharing (CORS) เป็นสิ่งที่ Web Developer ต้องควรรู้
ขอบอกก่อนเลยว่า Cross-Origin Resource Sharing (CORS) ไม่ใช่สิ่งแปลกใหม่อะไรสำหรับเว็บเดฟ หากเราไม่ได้เขียนเว็บดึง API จาก Domain อื่นหรือ Server ก็แทบจะไม่เจอปัญหาเรื่อง CORS เลย
บทความนี้จะพูดถึงเรื่อง CORS และวิธีการแก้ปัญหา
Cross-Origin Resource Sharing (CORS)
คือ เป็นกลไกที่ใช้ HTTP headers เพิ่มเติมเพื่อให้บราวเซอร์ได้รับสิทธิ์ในการเข้าถึงทรัพยากรที่เลือกจากเซิร์ฟเวอร์บนโดเมนอื่นมาแสดงบนหน้าเว็บบราวเซอร์ได้ อินเตอร์เน็ตเป็นการสื่อสารระหว่างคอมพิวเตอร์ ดังนั้นคอมพิวเตอร์แต่ละเครื่องต้องมี Protocol ที่เหมือนกัน ถึงจะสื่อสารกันรู้เรื่อง เว็บบราวเซอร์จะส่ง HTTP request เมื่อต้องการขอข้อมูลข้ามโดเมนหรือ port ที่ต่างกัน และต้องทำตามข้อตกลงการสื่อสาร(Protocol)
CORS จะกำหนดวิธีการที่เว็บบราวเซอร์และเซิร์ฟเวอร์สามารถโต้ตอบเพื่อกำหนดว่าจะให้อนุญาตในการขอข้อมูลข้ามโดเมนหรือไม่
หากต้องการร้องขอข้อมูลจาก domain-b.com ก็จะเจอ Error แบบนี้
เพราะปัจจุบันเรามักจะแยกฝั่ง Front-end และ Back-end ออกจากกันเป็นคนละโดเมน ด้วยเหตุผลเรื่องความปลอดภัยของ Browsers HTTP การอนุญาตให้เข้าถึงแหล่งข้อมูลจะต้องอยู่โดเมนเดียวกันเท่านั้น เว้นแต่ว่าแหล่งข้อมูลนั้นจะอนุญาตให้โดเมนของ Browsers สามารถเข้าถึงข้อมูลเหล่านั้นได้
ก่อนเข้าถึงวิธีแก้ เรามาเข้าใจการทำงานของมันซะก่อน
การทำงานของ Browser กับ Server
เมื่อรันแอป เว็บบราวเซอร์จะส่ง request ไปหา Server โดยแบ่งออกเป็น 2 รอบ
รอบที่ 1 บราวเซอร์จะส่ง request method เป็น OPTIONS โดยข้างใน OPTIONS จะมีการแนบโดเมนต้นทาง หากโดเมนที่แนบมาได้รับอนุญาตจากเซิร์ฟเวอร์ รอบที่2เขาก็สามารถส่ง request เรียกใช้ API ข้อมูลได้จากเซิร์ฟเวอร์ได้
วิธีการแก้ไขปัญหา CORS กับ Browser
หากเราเป็นเจ้าของ Server
เราก็สามารถอนุญาตโดเมนที่ต้องการให้เข้าถึงแหล่งข้อมูลได้ โดยกำหนด
Access-Control-Allow-Origin: ‘domain-a.com’
Access-Control-Allow-Origin: อนุญาต domain-a.com ให้สามารถเรียกข้อมูลได้
Access-Control-Allow-Methods: อนุญาต Methods ที่ใช้เรียกข้อมูลได้
Access-Control-Allow-Headers: อนุญาต Headers ที่ใช้เรียกข้อมูลได้หากต้องการอนุญาตให้ทุกโดเมนสามารถเข้าถึงแหล่งข้อมูลได้ดังนี้
Access-Control-Allow-Origin: ‘*’
แล้วถ้าอยาก Allow Origin มากกว่า 1 ละ
หากเราไม่ได้เป็นเจ้าของ Server เองล่ะ
เราสามารถใช้หลักการนี้ได้
ช่วงที่ผมฝึกงานอยู่ ผมได้รับ Requirement ให้ดึงข้อมูล API จากเว็บ Medium ปัญหาที่ผมเจอคือเขาไม่ได้เปิดอนุญาตให้ทุกโดเมนสามารถเข้าถึงข้อมูลได้
ผมก็เลยต้องเขียน Server ขึ้นมาสักตัว เพื่อเป็นตัวแทนในการยิง API ไปที่ Medium
แล้วให้ Client เรียกใช้ข้อมูลจาก Server อีกที
สรุป
หากเราต้องการรับ-ส่งข้อมูลผ่านแหล่งข้อมูล อย่าลืมกำหนดเรื่อง Cross-Origin Resource Sharing (CORS) ให้โดเมน Browser ของเราสามารถเข้าถึงข้อมูลได้
หวังว่าบทความนี้จะเป็นประโยชน์กับคนที่ติดปัญหาเรื่องนี้ ได้รู้วิธีการแก้ไขและสามารถนำไปปรับใช้ในชีวิตการทำงานได้นะครับ ^_^
