เครื่องมือสร้างส่วนหัว CORS

สร้างส่วนหัว Cross-Origin Resource Sharing สำหรับเซิร์ฟเวอร์ของคุณ

ตัวอย่างการใช้งาน

API สาธารณะเปิด

อนุญาตให้แหล่งที่มาใดๆ ส่งคำขอ GET และ POST เหมาะสำหรับ API สาธารณะที่ให้บริการข้อมูลแก่เว็บไซต์ใดๆ

แอปภายในพร้อมการยืนยันตัวตน

จำกัดการเข้าถึงเฉพาะแหล่งที่มาที่กำหนดพร้อมรองรับข้อมูลรับรอง เหมาะสำหรับแอปพลิเคชันภายในที่มีการยืนยันตัวตน

API อ่านอย่างเดียว

การกำหนดค่า API อ่านอย่างเดียวที่อนุญาตคำขอ GET จากแหล่งที่มาใดๆ และเปิดเผยส่วนหัวการแบ่งหน้า

คุณสมบัติ

การกำหนดค่าเต็มรูปแบบ

กำหนดค่าส่วนหัว CORS ทั้งหมดรวมถึงแหล่งที่มา เมธอด ส่วนหัว ข้อมูลรับรอง และ max-age

รองรับหลายเซิร์ฟเวอร์

รับสนิปเพตการกำหนดค่าพร้อมใช้สำหรับ Nginx, Apache, Node.js/Express และ PHP

แหล่งที่มาและส่วนหัวกำหนดเอง

เพิ่มแหล่งที่มาและส่วนหัวกำหนดเองหลายรายการด้วยอินเทอร์เฟซแท็กที่ใช้งานง่าย

ความเป็นส่วนตัวมาก่อน

การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ ไม่มีข้อมูลถูกส่งไปยังเซิร์ฟเวอร์

วิธีการใช้งาน?

กำหนดค่าการตั้งค่า

ตั้งค่าแหล่งที่มาที่อนุญาต เมธอด HTTP ส่วนหัว max-age และตัวเลือกข้อมูลรับรอง

เลือกรูปแบบผลลัพธ์

สลับระหว่างรูปแบบผลลัพธ์ส่วนหัว HTTP, Nginx, Apache, Node.js หรือ PHP

คัดลอกและนำไปใช้

คัดลอกการกำหนดค่าที่สร้างและเพิ่มลงในการตั้งค่าเซิร์ฟเวอร์ของคุณ

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

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

ข้อกำหนด CORS ห้ามการรวม Access-Control-Allow-Origin: * กับ Access-Control-Allow-Credentials: true เมื่อมี credentials (คุกกี้, Authorization header) เซิร์ฟเวอร์ต้องส่งคืน origin ที่ขอมาแบบแน่นอน ไม่ใช่ wildcard ซึ่งป้องกันไม่ให้เว็บไซต์ใดๆ ใช้ credentials ของผู้ใช้ที่เข้าสู่ระบบเพื่อเรียก API

คำขอ preflight OPTIONS จะถูกส่งก่อนคำขอที่ไม่ใช่แบบธรรมดา คำขอแบบธรรมดาใช้ GET หรือ POST พร้อม header มาตรฐานเท่านั้น คำขอที่ไม่ธรรมดาได้แก่: เมธอด PUT, DELETE, PATCH; header กำหนดเอง (เช่น Authorization, X-API-Key); Content-Type เป็น application/json เซิร์ฟเวอร์ต้องตอบสนองคำขอ OPTIONS ด้วย header Allow-* ที่เหมาะสม

Max-Age บอกเบราว์เซอร์ว่าควรแคชการตอบสนอง preflight ไว้กี่วินาที ค่าที่นิยมคือ 86400 (24 ชั่วโมง) ซึ่งช่วยลดการเดินทางไป-กลับของ preflight ในสภาพแวดล้อมจริง ตั้งค่าเป็น 0 ในระหว่างการพัฒนาเพื่อป้องกันปัญหาการแคช

โดยค่าเริ่มต้น JavaScript อ่านได้เฉพาะ response header "ปลอดภัย" จำนวนจำกัด หาก API ส่งคืน header กำหนดเอง เช่น X-Total-Count หรือ X-Request-Id คุณต้องระบุใน Access-Control-Expose-Headers ไม่เช่นนั้น JavaScript จะเห็น header เหล่านั้นเป็น undefined แม้จะมีอยู่ใน HTTP response

เลือก "แหล่งที่มาเฉพาะ" และเพิ่ม origin ที่เชื่อถือได้แต่ละอัน (เช่น https://app.example.com) ข้อกำหนด CORS ไม่รองรับหลายค่าใน header เดียว สำหรับหลาย origin เซิร์ฟเวอร์ต้องตรวจสอบ Origin header ของคำขอกับรายการที่อนุญาตแบบไดนามิกและส่งคืนค่าที่ตรงกัน การตั้งค่า Nginx/Apache/Node.js ที่สร้างขึ้นมีตรรกะนี้รวมอยู่ด้วย

HTTP Headers (ค่า header ดิบ), Nginx (directive add_header), Apache (.htaccess พร้อม directive Header set), Node.js/Express (middleware ใช้แพ็กเกจ cors หรือการเรียก res.setHeader แบบ manual) และ PHP (การเรียกฟังก์ชัน header()) สลับระหว่างแท็บเพื่อดูแต่ละรูปแบบ

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

ตั้งค่า CORS ได้ง่ายๆ ไม่ต้องปวดหัว

ถ้าเคยเจอ error CORS ในคอนโซลเบราว์เซอร์ คุณจะรู้ว่ามันน่าหงุดหงิดแค่ไหน เครื่องมือนี้สร้างส่วนหัวที่ถูกต้องให้คุณภายในไม่กี่วินาที โดยไม่ต้องจำสเปคทั้งหมด

คอนฟิกพร้อมใช้สำหรับเซิร์ฟเวอร์ของคุณ

สร้างโค้ดที่คัดลอกไปวางได้เลยสำหรับ Nginx, Apache, Node.js/Express และ PHP เลือกแท็บเซิร์ฟเวอร์ที่ต้องการ คัดลอกโค้ด แล้วนำไปใช้ได้ทันที

ควบคุมสิทธิ์การเข้าถึงได้อย่างละเอียด

กำหนดได้เลยว่าจะอนุญาตแหล่งที่มา เมธอด HTTP และส่วนหัวใดบ้าง ยังตั้งค่า Credentials, Max-Age สำหรับ preflight cache และส่วนหัวที่เปิดเผยได้จากหน้าเดียวกัน

ข้อมูลอยู่ในเบราว์เซอร์ของคุณเท่านั้น

การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์โดยตรง ไม่มีข้อมูลถูกส่งไปยังเซิร์ฟเวอร์ภายนอก จึงใช้สร้างคอนฟิกสำหรับโปรเจกต์ภายในได้อย่างสบายใจ

ความปลอดภัยและความเป็นส่วนตัว

ความปลอดภัยของข้อมูลของคุณคือความสำคัญอันดับแรกของเรา

การประมวลผลภายใน

การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ

ไม่มีการถ่ายโอนข้อมูล

ข้อมูลของคุณจะไม่ถูกส่งไปยังเซิร์ฟเวอร์ของเรา

ไม่มีการจัดเก็บข้อมูล

ไม่มีข้อมูลถูกเก็บหรือแบ่งปัน

การเข้ารหัส SSL

การเข้ารหัส SSL สำหรับการเชื่อมต่อที่ปลอดภัย

เครื่องมือนี้มีประโยชน์หรือไม่?

เครื่องมือสร้างส่วนหัว CORS

การกำหนดค่า CORS

ผลลัพธ์ที่สร้าง

ตัวอย่างการใช้งาน

API สาธารณะเปิด

แอปภายในพร้อมการยืนยันตัวตน

API อ่านอย่างเดียว

คุณสมบัติ

การกำหนดค่าเต็มรูปแบบ

รองรับหลายเซิร์ฟเวอร์

แหล่งที่มาและส่วนหัวกำหนดเอง

ความเป็นส่วนตัวมาก่อน

วิธีการใช้งาน?

กำหนดค่าการตั้งค่า

เลือกรูปแบบผลลัพธ์

คัดลอกและนำไปใช้

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

ตั้งค่า CORS ได้ง่ายๆ ไม่ต้องปวดหัว

คอนฟิกพร้อมใช้สำหรับเซิร์ฟเวอร์ของคุณ

ควบคุมสิทธิ์การเข้าถึงได้อย่างละเอียด

ข้อมูลอยู่ในเบราว์เซอร์ของคุณเท่านั้น

ความปลอดภัยและความเป็นส่วนตัว

การประมวลผลภายใน

ไม่มีการถ่ายโอนข้อมูล

ไม่มีการจัดเก็บข้อมูล

การเข้ารหัส SSL

เครื่องมือสร้างส่วนหัว CORS

การกำหนดค่า CORS

ผลลัพธ์ที่สร้าง

ตัวอย่างการใช้งาน

API สาธารณะเปิด

แอปภายในพร้อมการยืนยันตัวตน

API อ่านอย่างเดียว

คุณสมบัติ

การกำหนดค่าเต็มรูปแบบ

รองรับหลายเซิร์ฟเวอร์

แหล่งที่มาและส่วนหัวกำหนดเอง

ความเป็นส่วนตัวมาก่อน

วิธีการใช้งาน?

กำหนดค่าการตั้งค่า

เลือกรูปแบบผลลัพธ์

คัดลอกและนำไปใช้

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

CORS คืออะไรและทำไมเบราว์เซอร์ถึงบังคับใช้?

ทำไมถึงใช้ wildcard (*) กับ credentials ไม่ได้?

อะไรทำให้เกิด preflight OPTIONS request?

Access-Control-Max-Age header ใช้ทำอะไร?

Access-Control-Expose-Headers header ใช้ทำอะไร?

จะจำกัด CORS ให้เฉพาะ origin ที่กำหนดได้อย่างไร?

เครื่องมือนี้สร้างการตั้งค่าเซิร์ฟเวอร์อะไรบ้าง?

การตั้งค่าของฉันถูกบันทึกไหม?

ตั้งค่า CORS ได้ง่ายๆ ไม่ต้องปวดหัว

คอนฟิกพร้อมใช้สำหรับเซิร์ฟเวอร์ของคุณ

ควบคุมสิทธิ์การเข้าถึงได้อย่างละเอียด

ข้อมูลอยู่ในเบราว์เซอร์ของคุณเท่านั้น

ความปลอดภัยและความเป็นส่วนตัว

การประมวลผลภายใน

ไม่มีการถ่ายโอนข้อมูล

ไม่มีการจัดเก็บข้อมูล

การเข้ารหัส SSL

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

ตัวสร้างคีย์ SSH

ตัวสร้าง TOTP

ตัวสร้าง CSP

เครื่องมือสร้างสตริงแบบสุ่ม

ตัวสร้าง JWT

เครื่องมือสร้างแฮช MD5