การตั้งค่า CORS (Cross-Origin Resource Sharing) สำหรับเว็บไซต์ใน ServBay

ในการพัฒนาเว็บยุคใหม่ แอปพลิเคชันฝั่งหน้า (ซึ่งมักจะรันอยู่บนโดเมนหนึ่ง) มักต้องการเข้าถึง API หรือบริการอื่นๆ ที่รันบนโดเมนหรือพอร์ตต่างกัน นโยบาย Same-Origin ของเบราว์เซอร์จะป้องกันคำขอข้ามโดเมนเหล่านี้โดยค่าเริ่มต้นด้วยเหตุผลด้านความปลอดภัย CORS (Cross-Origin Resource Sharing) คือกลไกระดับมาตรฐานที่เปิดโอกาสให้เซิร์ฟเวอร์ระบุได้ว่าอนุญาตให้แหล่งที่มาจากไหนสามารถเข้าถึงทรัพยากร ซึ่งช่วยให้การสื่อสารข้ามโดเมนปลอดภัย

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

CORS คืออะไร

CORS (Cross-Origin Resource Sharing) คือกลไกที่ใช้ HTTP Header เซิร์ฟเวอร์ใช้กำหนดว่ามีแหล่งที่มาเพิ่มเติม (โดเมน, โปรโตคอล, พอร์ต) ใดที่สามารถโหลดทรัพยากรจากมันได้ เมื่อเว็บเพจร้องขอข้อมูลจากแหล่งอื่นที่ต่างจากตัวเอง เบราว์เซอร์จะมองว่าเป็น “Cross-Origin HTTP Request” และจะปฏิเสธโดยค่าเริ่มต้นตามนโยบาย Same-Origin CORS ช่วยสร้างช่องทางให้เซิร์ฟเวอร์-เบราว์เซอร์หารือกันว่าคำขอข้ามโดเมนจะถูกอนุญาตหรือไม่

ทำไมนักพัฒนาต้องตั้งค่า CORS

เมื่อคุณพัฒนาแอปแยกฝั่งหน้า-หลัง (เช่น หน้าเว็บระบบที่ app.servbay.demo ส่วน API backend อยู่ที่ api.servbay.demo) หรือกรณีที่ frontend เรียกใช้ API ของบุคคลที่สาม เบราว์เซอร์จะปฏิเสธการร้องขอข้ามโดเมน หากไม่มีการกำหนด CORS ไว้ การตั้งค่า CORS คือการแจ้งเบราว์เซอร์ให้รู้ว่าเซิร์ฟเวอร์ยินยอมให้คำขอจากต้นทางของคุณเรียกใช้ทรัพยากรได้ เพื่อแก้ปัญหา Same-Origin

เข้าใจ HTTP Header หลักของ CORS

เมื่อเซิร์ฟเวอร์ตอบสนองต่อคำขอข้ามโดเมน จะมี HTTP Header Access-Control-* เฉพาะทางกลับไป เบราว์เซอร์จะวิเคราะห์ค่าต่างๆ เหล่านี้และตัดสินใจว่าจะอนุญาตให้คำขอสำเร็จหรือไม่ แต่ละค่าดังต่อไปนี้สามารถตั้งค่าได้ที่ ServBay:

1. Access-Control-Allow-Origin

   • ความหมาย: คือ Header หลักในการกำหนดระบุแหล่งที่มาต้นทาง (Origin) ที่ได้รับอนุญาต
   • ตัวอย่างค่า:
     • *: อนุญาตทุกโดเมน (ทุก Origin) คำเตือน: แม้จะสะดวกแต่ห้ามใช้ * กับ production เพราะเสี่ยงต่อความปลอดภัย
     • https://servbay.demo: อนุญาตเฉพาะคำขอที่มาจาก https://servbay.demo เท่านั้น
     • https://servbay.demo https://api.servbay.demo: อนุญาตหลาย Origin แยกด้วยเว้นวรรค
   • ข้อควรระวัง: หากต้องการให้ cross-origin request ส่ง Cookie หรือข้อมูลยืนยันตัวตน (ตั้งค่า Access-Control-Allow-Credentials: true) ค่า Access-Control-Allow-Origin ห้าม เป็น * ต้องเป็น origin ที่ระบุชัดเจนเท่านั้น

2. Access-Control-Allow-Methods

   • ความหมาย: ระบุ HTTP Methods ที่สามารถใช้ใน cross-origin request (เช่น GET, POST, PUT, DELETE, OPTIONS)
   • ตัวอย่างค่า: GET, POST, PUT, DELETE, OPTIONS (แต่ละ method คั่นด้วยคอมม่า)
   • ข้อควรระวัง: สำหรับ “non-simple request” เช่นใช้ PUT/DELETE หรือมี custom headers เบราว์เซอร์จะส่ง “preflight request” ด้วย OPTIONS ก่อนเสมอ เซิร์ฟเวอร์ต้องตอบกลับด้วย header ที่ถูกต้อง รวมทั้ง Access-Control-Allow-Methods ด้วย ฉะนั้น ปกติต้องใส่ OPTIONS ไว้ด้วยเสมอ

3. Access-Control-Allow-Headers

   • ความหมาย: ระบุ custom HTTP headers อะไรที่ผู้ร้องขอ cross-origin สามารถส่งไปหาเซิร์ฟเวอร์ได้
   • ตัวอย่างค่า: Content-Type, Authorization, X-Requested-With (แต่ละ header คั่นด้วยคอมม่า)
   • ข้อควรระวัง: หากฝั่ง frontend ส่ง headers นอกเหนือจาก “simple headers” (Accept, Accept-Language, Content-Language, Content-Type ที่เป็น application/x-www-form-urlencoded, multipart/form-data, text/plain) จะเกิด preflight request และคุณต้องใส่ header ที่อนุญาตไว้ทั้งหมดในนี้

4. Access-Control-Allow-Credentials

   • ความหมาย: ระบุอนุญาตให้คำขอ cross-origin ส่งข้อมูลยืนยันตัวตนผู้ใช้ เช่น Cookie, SSL certificate, HTTP authentication
   • ค่าที่ใช้: true หรือ false
   • ข้อควรระวัง: เมื่อเปิดใช้ (ตั้ง true) ค่า Access-Control-Allow-Origin ต้องเป็น origin ที่ระบุชัดเจนเท่านั้น ห้ามใช้ * และฝั่ง client ต้องส่งคำขอพร้อมกำหนด flag เช่น xhr.withCredentials = true หรือ fetch(url, { credentials: 'include' })

เปิดใช้งานและตั้งค่า CORS ใน ServBay

ServBay มีอินเทอร์เฟซกราฟิกที่ใช้ง่าย ให้คุณกำหนด CORS ได้เป็นรายเว็บไซต์อย่างสะดวก ทำตามขั้นตอนนี้:

1. เปิด ServBay และไปที่รายการเว็บไซต์: เปิดแอป ServBay ในเครื่อง จากเมนูหลักซ้ายมือ คลิกเมนู "เว็บไซต์" จะเห็นรายชื่อเว็บทั้งหมดที่ตั้งค่าไว้ใน ServBay

2. เลือกเว็บไซต์ที่ต้องการตั้งค่า CORS: เลือกเว็บไซต์ที่ต้องการเปิดและตั้งค่า CORS จากรายการ แล้วคลิกชื่อเว็บเพื่อเข้าสู่หน้าตั้งค่ารายละเอียด

3. ค้นหาและเปิดการตั้งค่า CORS: จากหน้า settings ตรงกลาง เลื่อนลงมาหา section "CORS" โดยค่าเริ่มต้น, CORS ใน ServBay จะปิดอยู่ ให้คลิกที่ปุ่ม toggle ด้านข้างเพื่อเปิด หลังเปิดใช้งานแล้ว field ด้านล่างจะพร้อมให้แก้ไขได้

4. ตั้งค่า Access-Control-Allow-Origin: ที่ช่อง "Access-Control-Allow-Origin" ให้พิมพ์ origin (แหล่งที่มา) ที่คุณต้องการอนุญาตให้เข้าถึงเว็บไซต์นี้ จะกำหนดได้ 1 แห่งหรือหลายแห่ง (คั่นด้วยเว้นวรรค) เช่น https://frontend.servbay.demo https://anotherapp.servbay.demo ควรหลีกเลี่ยงการใช้ * ใน production

5. ตั้งค่า Access-Control-Allow-Methods: ในช่อง "Access-Control-Allow-Methods" ป้อนรายการ HTTP method ที่อนุญาต (คั่นด้วยคอมม่า) เช่น GET, POST, PUT, DELETE, OPTIONS ใส่ method ให้ครบตามที่แอปของคุณใช้และโดยมากควรใส่ OPTIONS ด้วย

6. ตั้งค่า Access-Control-Allow-Headers: ที่ช่อง "Access-Control-Allow-Headers" ป้อน custom HTTP headers ที่จะอนุญาตใช้ใน cross-origin หลายค่าได้โดยคั่นด้วยคอมม่า เช่น Content-Type, Authorization, X-Custom-Header โปรดระบุเท่าที่แอปใช้งานเท่านั้น

7. ตั้งค่า Access-Control-Allow-Credentials (ไม่บังคับ): หากต้องการให้ cross-origin request ส่ง Cookie หรือการรับรองความถูกต้อง ให้คลิก toggle ที่ "Allow-Credentials" ไปที่ "เปิด" สำคัญ: เมื่อเปิด option นี้แล้ว ที่ขั้นตอน 4 (Access-Control-Allow-Origin) ต้องไม่ใช้ *

8. บันทึกการตั้งค่า: หลังตั้งค่าทั้งหมดแล้ว อย่าลืมกดปุ่ม "บันทึก" ที่มุมขวาล่างของหน้า เพื่อใช้งานการเปลี่ยนแปลงนี้ ServBay จะอัปเดต config บนเซิร์ฟเวอร์ (Caddy หรือ Nginx) ให้อัตโนมัติ โดยไม่ต้องรีสตาร์ทเอง

ตัวอย่างการตั้งค่า

ดูภาพตัวอย่างการตั้งค่า CORS สำหรับเว็บไซต์ชื่อ “ServBay Demo Website” ใน ServBay ด้านล่างนี้:

จากตัวอย่างการตั้งค่านี้:

• Access-Control-Allow-Origin: https://frontend.servbay.demo https://api.servbay.demo
• Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers: Content-Type, Authorization
• Allow-Credentials: เปิดใช้งาน (true)

ความหมายคือ เฉพาะ request จาก https://frontend.servbay.demo และ https://api.servbay.demo เท่านั้นที่เข้าถึง resource ของ “ServBay Demo Website” ได้ สามารถใช้ method GET, POST, PUT, DELETE, OPTIONS ส่ง header Content-Type และ Authorization และอนุญาตส่ง cookie หรือ credentials

หมายเหตุและข้อควรปฏิบัติที่ดีที่สุด

• เน้นความปลอดภัย: การใช้ Access-Control-Allow-Origin: * สำหรับ dev/test นั้นสะดวก แต่ production ควรระบุ origin อย่างชัดเจนเพื่อลดความเสี่ยง
• preflight request: เข้าใจวิธีทำงานของ preflight (OPTIONS) จะช่วยให้ debug CORS ได้ง่ายขึ้น อย่าลืมตั้งค่าให้ server ของคุณ (ผ่าน ServBay) ตอบ header ที่จำเป็น
• browser cache: เบราว์เซอร์อาจ cache นโยบาย CORS ถ้าตั้งค่าใหม่แล้วยัง error แนะนำ clear cache หรือทดสอบในโหมด private/incognito
• CORS ระดับแอป: หลาย framework/web library (เช่น Laravel, Express.js, Spring Boot) สามารถตั้งค่า CORS ใน application ได้เอง แต่ของ ServBay จะทำงานที่ระดับ web server (Caddy/Nginx) ซึ่งจะมี priority สูงกว่าในหลายกรณี หากมีปัญหาให้เช็ค config ทั้งสองฝั่ง
• เครื่องมือ debug: ใช้เครื่องมือ Network (ใน Developer Tools ของ browser, เปิด F12) เพื่อดู HTTP headers ที่ส่งจริงและ header ที่ถูกส่งกลับมา จะช่วยให้หาสาเหตุปัญหา CORS ได้

คำถามที่พบบ่อย (FAQ)

ถาม: ตั้งค่า CORS ตามขั้นตอนแล้ว ทำไม cross-origin request ยังไม่สำเร็จ?

ตอบ: ตรวจสอบตามนี้

1. ดู console/network ของเบราว์เซอร์: เบราว์เซอร์จะมี error message เกี่ยวกับ CORS และแสดง HTTP headers ทั้งหมดใน tab "Network" ตรวจดูว่ามี header Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers พร้อมค่าที่ถูกต้องครบหรือไม่
2. ตรวจ origin: ตรวจสอบว่า origin (protocol, domain, port) ใน Access-Control-Allow-Origin ตรงกับสิ่งที่ frontend ใช้ request จริง
3. ตรวจ Method/Headers: เช็คว่า Access-Control-Allow-Methods มี method ที่ใช้อยู่ และ Access-Control-Allow-Headers ครบถ้วนตรงกับ headers ที่ส่งไป
4. เรื่อง Credentials: หากส่ง Cookie หรือข้อมูลยืนยันตัวตน ต้องเปิด "Allow-Credentials" ใน ServBay ด้วยและ Access-Control-Allow-Origin ต้องระบุเป็น origin ที่ชัดเจน (ห้ามเป็น *) และ client ต้อง config ให้ส่ง credentials เช่นกัน (ตั้ง withCredentials = true)
5. preflight: สำหรับ non-simple request, ต้องดูว่ามี preflight (OPTIONS) ไปหา server หรือไม่ แล้ว server ตอบด้วย header ที่ถูกต้องหรือเปล่า
6. กดบันทึก: อย่าลืมกดปุ่ม "บันทึก" ใน ServBay หลังปรับ config

ถาม: สามารถตั้ง global CORS policy สำหรับทุกเว็บไซต์ใน ServBay ได้ไหม?

ตอบ: การตั้งค่า CORS ใน ServBay จะแยกตามแต่ละเว็บไซต์เพื่อความยืดหยุ่นและความปลอดภัย ปัจจุบัน UI ของ ServBay ยังไม่รองรับการตั้งค่าสำหรับทุกเว็บไซต์พร้อมกัน หากต้องการใช้ policy เดียวกัน ให้ตั้งค่าแยกสำหรับทุกเว็บไซต์

ถาม: การตั้งค่า CORS ใน ServBay ทำงานอย่างไร?

ตอบ: ServBay ใช้ Caddy หรือ Nginx เป็น web server ฝั่ง backend การตั้งค่า CORS ที่คุณ config จาก UI จะถูกแปลงเป็นคำสั่งสำหรับไฟล์ config ของ Caddy หรือ Nginx ทันที ServBay ดูแลเรื่องการ update config file และโหลดซ้ำ server ให้ ไม่ต้องแก้ไฟล์เอง

สรุป

ด้วยอินเทอร์เฟซที่ใช้งานง่ายของ ServBay คุณสามารถเปิดและตั้งค่า CORS ให้กับเว็บไซต์ในสภาพแวดล้อมพัฒนา Local ได้อย่างง่ายดายและปลอดภัย การเข้าใจและปรับแต่ง Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers, Access-Control-Allow-Credentials อย่างเหมาะสม คือหัวใจสำหรับการแก้ปัญหา cross-origin ขอให้ยึดแนวปฏิบัติในบทความนี้เพื่อสะดวกและปลอดภัยสำหรับการพัฒนาเว็บในเครื่องของคุณ