CORS Header Generator: กำหนดค่า Cross-Origin Sharing ในไม่กี่วินาที

CORS (Cross-Origin Resource Sharing) เป็นกลไกความปลอดภัยที่ browser ใช้ควบคุมการเข้าถึง resource ข้าม origin หากคุณกำลังพัฒนา API ที่ frontend ดึงข้อมูลจาก domain อื่น คุณจำเป็นต้องตั้งค่า CORS headers ให้ถูกต้อง ไม่เช่นนั้น browser จะบล็อก request และโยน error อย่าง No 'Access-Control-Allow-Origin' header is present ซึ่งเป็นปัญหาคลาสสิกที่นักพัฒนาทุกคนเคยเจอ

การเขียน CORS header ด้วยมือเป็นเรื่องน่าปวดหัว เพราะต้องจำ syntax ของ server แต่ละประเภทให้ได้ ต้องรู้ว่า header ไหนใช้ตอน preflight บ้าง และต้องไม่ลืมข้อจำกัดด้านความปลอดภัยอย่างการใช้ wildcard * ร่วมกับ credentials CORS Header Generator ช่วยแก้ปัญหาเหล่านี้ทั้งหมดด้วยการสร้าง config สำหรับ Nginx, Apache และ Express.js ให้อัตโนมัติเพียงไม่กี่คลิก

ในบทความนี้เราจะเดินผ่านวิธีใช้งานเครื่องมือ ทำความเข้าใจ CORS headers แต่ละตัวอย่างลึก พร้อมตัวอย่างกรณีใช้งานจริงและ best practices เพื่อให้คุณตั้งค่าได้ถูกต้องและปลอดภัยตั้งแต่ครั้งแรก

ทำไมต้องใช้ CORS Header Generator?

• ผลลัพธ์หลาย server ทันที — สร้าง config สำหรับ Nginx, Apache และ Express.js พร้อมกันในคราวเดียว ไม่ต้องเขียนแยกแต่ละตัว
• ลดความเสี่ยงพิมพ์ผิด — ชื่อ header ยาวๆ อย่าง Access-Control-Allow-Headers พิมพ์ผิดแค่ตัวเดียวก็ทำให้ preflight พังได้ เครื่องมือจะใส่ให้ถูกเสมอ
• ตรวจสอบความปลอดภัยให้ — แจ้งเตือนเมื่อตั้งค่าที่มีความเสี่ยง เช่น ใช้ * คู่กับ credentials: true ซึ่ง browser จะปฏิเสธ
• จัดการ preflight ครบ — เลือก HTTP methods (GET, POST, PUT, DELETE, PATCH, OPTIONS, HEAD) และ headers ที่อนุญาต แล้วได้ผลลัพธ์ที่รองรับ OPTIONS preflight request อัตโนมัติ
• ปรับแต่งได้ละเอียด — กำหนด Access-Control-Max-Age เพื่อ cache preflight และเลือก Access-Control-Expose-Headers ที่ frontend จะอ่านได้
• คัดลอกได้ทันที — กดปุ่ม copy เพื่อนำ config ไปวางใน server ของคุณได้เลย ไม่ต้องจัดรูปแบบเอง

ฟีเจอร์เด่น

• คำเตือนด้านความปลอดภัยแบบเรียลไทม์ — เมื่อคุณเปิดใช้ credentials ร่วมกับ wildcard origin เครื่องมือจะแจ้งเตือนทันที เพราะ browser จะบล็อก config แบบนี้อยู่แล้วตามมาตรฐาน CORS
• จัดการ preflight OPTIONS request — config ที่ได้จะตอบ OPTIONS อย่างถูกต้อง ทำให้ frontend framework สมัยใหม่อย่าง React, Vue หรือ Angular ทำ preflight ได้สำเร็จ
• รองรับทั้งโหมดพัฒนาและ production — เลือก localhost สำหรับ dev หรือ domain จริงสำหรับ production ได้ในที่เดียวกัน

วิธีใช้งาน CORS Header Generator

1. ระบุ allowed origins — กรอก domain ที่อนุญาตให้เรียก API ได้ เช่น https://app.example.com คั่นหลาย origin ด้วย comma หรือใช้ * สำหรับกรณี public API (ไม่มี credentials)
2. เลือก HTTP methods — ติ๊กเฉพาะ methods ที่ API รองรับจริง ยิ่งจำกัดเท่าไหร่ยิ่งปลอดภัย หากใช้แค่ GET ก็อย่าเปิด DELETE ให้
3. กำหนด allowed headers — เลือก headers ที่ frontend จะส่งมา เช่น Content-Type และ Authorization สำหรับการส่ง JWT หรือ API key
4. ตั้งค่าเพิ่มเติม — ระบุ Max-Age (แนะนำ 86400 วินาที = 1 วัน เพื่อ cache preflight) และ Expose-Headers หาก frontend ต้องอ่าน custom response header
5. เลือกรูปแบบผลลัพธ์และคัดลอก — เลือก Nginx, Apache หรือ Express.js ตาม server ของคุณ กดปุ่ม copy แล้วนำไปวางใน config file ได้ทันที

ทำความเข้าใจ CORS Headers

CORS ทำงานโดยการเพิ่ม HTTP headers ฝั่ง server เพื่อบอก browser ว่าจะอนุญาตให้ origin ใดเข้าถึง resource ได้ การทำความเข้าใจ headers เหล่านี้จะช่วยให้คุณ debug ปัญหาได้แม่นยำขึ้น

Origin คือ scheme + domain + port ของหน้าเว็บที่ทำ request เช่น https://app.example.com (port 443) และ http://app.example.com:8080 ถือเป็นคนละ origin กัน เมื่อ frontend และ API อยู่คนละ origin browser จะบังคับใช้กฎ CORS

Preflight (OPTIONS request) — สำหรับ request ที่ "ไม่ใช่ simple" (เช่น ใช้ method อย่าง PUT/DELETE หรือส่ง header อย่าง Authorization) browser จะส่ง OPTIONS request ไปก่อนเพื่อถาม server ว่าอนุญาตอะไรบ้าง ในขั้นตอนนี้ server ต้องตอบด้วย Access-Control-Allow-* headers ให้ครบ ไม่เช่นนั้น request จริงจะถูกบล็อกเสียก่อน

Credentials — หาก frontend ต้องส่ง cookie หรือ Authorization header ต้องเปิด Access-Control-Allow-Credentials: true ฝั่ง server และฝั่ง client ก็ต้องตั้ง credentials: 'include' ข้อสำคัญคือเมื่อเปิด credentials แล้ว Access-Control-Allow-Origin จะใช้ * ไม่ได้ ต้องระบุ origin เจาะจง

Key Access-Control-* Headers

ตัวอย่าง Nginx config สำหรับ API ที่อนุญาต origin เดียว:

location /api/ {
    add_header Access-Control-Allow-Origin "https://app.example.com" always;
    add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
    add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
    add_header Access-Control-Allow-Credentials "true" always;
    add_header Access-Control-Max-Age 86400 always;

    if ($request_method = OPTIONS) {
        return 204;
    }
}

ตัวอย่าง Express.js โดยใช้ cors middleware:

const cors = require('cors');

app.use(
  cors({
    origin: 'https://app.example.com',
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization'],
    credentials: true,
    maxAge: 86400,
    exposedHeaders: ['X-Total-Count'],
  })
);

กรณีการใช้งานจริง

รักษาความปลอดภัย Public API

หาก API ของคุณเป็นแบบ public ไม่ต้องมี authentication สามารถใช้ Access-Control-Allow-Origin: * ได้ แต่ต้องไม่เปิด credentials เพื่อให้ทุก website เรียกใช้ได้อย่างปลอดภัย เหมาะสำหรับ weather API, exchange rate API หรือ public dataset ที่ตั้งใจเปิดให้ทุกคนใช้งาน

การยืนยันตัวตนด้วย Cookie + Credentials

เมื่อ API ใช้ session cookie สำหรับ authentication (เช่น ระบบที่ login ผ่าน browser) ต้องเปิด Access-Control-Allow-Credentials: true และระบุ origin เจาะจงเท่านั้น ห้ามใช้ * เด็ดขาด เพราะ browser จะบล็อกทันที กรณีนี้ CORS Header Generator จะแจ้งเตือนให้คุณเปลี่ยนจาก wildcard เป็น origin จริงๆ

ฝัง Third-Party Widget

หากคุณสร้าง widget ที่ให้ website อื่น embed (เช่น chat box หรือ form builder) frontend ของ widget จะทำ request ไปยัง API ของคุณจาก origin ของลูกค้าหลายเจ้า คุณสามารถระบุ allowed origins เป็นรายตัว หรือใช้ logic ตรวจสอบ dynamic origin ใน server เพื่อสะท้อนค่า Origin กลับเฉพาะ domain ที่อยู่ใน whitelist

API สำหรับ Mobile App + Web

เมื่อ API ให้บริการทั้ง mobile app (native) และ web frontend อย่าลืมว่า native app ไม่ถูกบังคับโดย CORS แต่ web frontend ใช่ ดังนั้นคุณสามารถเปิด origin ของ web app เฉพาะเจาะจง โดยไม่กระทบการเรียกจาก mobile SDK แต่อย่างไร

Best Practices

• จำกัด origin ให้แคบที่สุด — ระบุ domain ที่จำเป็นจริงเท่านั้น อย่าใช้ * เว้นแต่เป็น public API ที่ไม่มีข้อมูลอ่อนไหว
• อย่าใช้ * ร่วมกับ credentials — เป็นสิ่งต้องห้ามตามมาตรฐาน CORS เพราะ browser จะปฏิเสธทันที ให้ระบุ origin เจาะจงแทนเสมอ
• ตั้ง Max-Age ให้เหมาะสม — ค่า 86400 (1 วัน) เป็นจุดเริ่มต้นที่ดี ลด OPTIONS request ซ้ำๆ แต่ถ้ามีการเปลี่ยน policy บ่อยก็ลดลงมาเพื่อให้ cache หมดเร็วขึ้น
• เปิดเฉพาะ methods ที่ใช้จริง — หาก endpoint รับแค่ GET อย่าเปิด POST หรือ DELETE เผื่อ เพราะยิ่งอนุญาตมากยิ่งเพิ่มพื้นผิวการโจมตี
• ทดสอบ preflight จริง — ใช้ browser DevTools หรือ curl -X OPTIONS ตรวจว่า server ตอบ headers ครบก่อนขึ้น production เสมอ
• แยก config ระหว่าง dev และ prod — ใน dev อาจอนุญาต localhost แต่ใน prod ต้องจำกัดเฉพาะ domain จริง อย่าใช้ config เดียวกันทุก environment

สร้าง CORS Headers ของคุณตอนนี้

พร้อมกำหนดค่า CORS อย่างถูกต้องและปลอดภัยแล้วหรือยัง? เปิดใช้งาน CORS Header Generator ได้ฟรีทันทีใน browser เลือก origins, methods และ headers ที่ต้องการ แล้วคัดลอก config สำหรับ Nginx, Apache หรือ Express.js ไปใช้ได้เลย — ไม่ต้องติดตั้ง ไม่ต้องสมัครสมาชิก

บทความฉบับเต็มนี้สามารถอ่านได้ที่ production blog ของเรา พร้อมตัวอย่างและคำแนะนำเพิ่มเติม

เครื่องมือที่เกี่ยวข้อง

• HTTP Headers Viewer — ตรวจสอด response headers ที่ server ส่งกลับจริง เหมาะสำหรับ debug ว่า CORS headers ที่ตั้งไว้ถูกส่งมาครบหรือไม่
• Nginx Config Generator — สร้าง Nginx config สำหรับ reverse proxy, SSL และงาน server อื่นๆ เพิ่มเติมจาก CORS
• JWT Decoder — decode token JWT ที่ฝังใน Authorization header เพื่อตรวจสอบ claims ก่อนส่งไปยัง API

ขอให้สนุกกับการกำหนดค่า!