เครื่องมือสร้าง CORS Header

ตัวสร้างส่วนหัว CORS

สร้างส่วนหัว Access-Control-Allow-* สำหรับสถานการณ์ cross-origin ทั่วไป ตรวจจับไวลด์การด์และข้อมูลประจำตัวที่ขัดแย้งกันตั้งแต่เนิ่นๆ

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

รายการตรวจสอบ CORS

1. หากใช้คุกกี้หรือข้อมูลประจำตัวการให้สิทธิ์ เบราว์เซอร์จะไม่ยอมรับ * เป็น Allow-Origin

2. คำขอ preflight โดยปกติต้องการให้เซิร์ฟเวอร์ตอบสนองต่อ OPTIONS อย่างถูกต้องด้วย

3. ส่วนหน้าสามารถดูส่วนหัวการตอบกลับที่ไม่ใช่แบบง่ายเท่านั้นที่暴露 via Access-Control-Expose-Headers

ตัวอย่าง JSON

{
  "headers": [
    {
      "name": "Access-Control-Allow-Origin",
      "value": "https://app.geekformat.com"
    },
    {
      "name": "Access-Control-Allow-Methods",
      "value": "GET, POST, PATCH, DELETE, OPTIONS"
    },
    {
      "name": "Access-Control-Allow-Headers",
      "value": "Content-Type, Authorization, X-Request-Id"
    },
    {
      "name": "Access-Control-Expose-Headers",
      "value": "ETag, X-Trace-Id"
    },
    {
      "name": "Access-Control-Allow-Credentials",
      "value": "true"
    },
    {
      "name": "Access-Control-Max-Age",
      "value": "600"
    }
  ],
  "warnings": []
}

ตั้งค่า CORS Response Header ออนไลน์ ลดปัญหาความผิดพลาดในการจัดการข้ามโดเมน

คำแนะนำที่เกี่ยวข้อง

ตรวจสอบส่วนหัวความปลอดภัย

สร้าง Security.txt

ตรวจสอบ Robots.txt

เครื่องมือสร้าง Robots.txt

เครื่องมือสร้าง Meta Tag

ตัวสร้าง Cron

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

  • ขณะดีบัก Frontend และ Backend ให้สร้าง CORS Header มาตรฐานเพื่อตรวจสอบว่าเป็นปัญหาจากการตั้งค่าหรือไม่
  • ตรวจสอบข้อผิดพลาดข้ามโดเมนในเบราว์เซอร์ผ่านคำแนะนำเพื่อระบุความขัดแย้งระหว่าง Allow-Origin และ Credentials
  • สร้างบล็อกคอนฟิก CORS ที่คัดลอกไปใช้งานได้ทันทีสำหรับ Nginx, Gateway หรือบริการ Backend
  • ยืนยันความถูกต้องของ Methods, Headers และ Max-Age เมื่อต้องจัดการกับ Preflight Request (OPTIONS)

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

  1. กรอกแหล่งที่มาที่อนุญาต (Origin), วิธีการที่ยอมรับ, ส่วนหัวที่ยอมรับ และการอนุญาตส่งข้อมูลประจำตัว (Credentials)
  2. เครื่องมือจะสร้างบล็อกคอนฟิก CORS มาตรฐานโดยอัตโนมัติพร้อมแสดงคำเตือนหากมีการขัดกันของนโยบาย
  3. ตรวจสอบรายการตรวจสอบ CORS เพื่อยืนยันว่าการตั้งค่าเหมาะสมและปลอดภัย
  4. คัดลอก Response Header ที่สร้างขึ้นเพื่อใช้ในคอนฟิกเซิร์ฟเวอร์หรือการดีบัก API

คุณสมบัติ

  • สร้างฟิลด์ CORS ได้ครบถ้วน: กำหนด Origin, Methods, Headers, Credentials ได้ในครั้งเดียว
  • พร้อมสำหรับคอนฟิกเซิร์ฟเวอร์: ผลลัพธ์ที่ได้สามารถนำไปใช้ใน Nginx, Gateway หรือ Backend ได้ทันทีเพื่อลดข้อผิดพลาด
  • รองรับสถานการณ์ Preflight: เหมาะสำหรับการจัดการคำขอ OPTIONS, การดีบัก API และการตรวจสอบข้อผิดพลาด CORS ในเบราว์เซอร์
  • สร้างเสร็จคัดลอกได้ทันที: ผลลัพธ์แสดงผลในรูปแบบที่ชัดเจนและเป็นมาตรฐาน พร้อมสำหรับการใช้งานใน Gateway, Proxy หรือ Backend

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

จะสร้าง CORS Response Header ที่ถูกต้องได้อย่างไร?

ระบุแหล่งที่มา, วิธีการ, ส่วนหัวที่อนุญาต และสถานะ Credentials ก่อนจะสร้างส่วนหัวที่เกี่ยวข้อง วิธีนี้จะแม่นยำกว่าการเขียนเองและช่วยเลี่ยงปัญหาความขัดแย้งของนโยบาย

ทำไม Access-Control-Allow-Origin ถึงใช้เครื่องหมายดอกจันร่วมกับ Credentials ไม่ได้?

เมื่อมีการอนุญาตให้ส่งข้อมูลประจำตัว (Credentials) เบราว์เซอร์จะไม่ยอมรับแหล่งที่มาแบบกวาดรวมทั้งหมด (Wildcard) เครื่องมือนี้จะช่วยแจ้งเตือนปัญหาที่พบบ่อยเหล่านี้ให้คุณทราบล่วงหน้า

เหมาะสำหรับการจัดการคอนฟิก Preflight Request (OPTIONS) หรือไม่?

เหมาะมาก เครื่องมือสามารถช่วยสร้างฟิลด์สำคัญอย่าง Methods, Headers และ Max-Age ที่จำเป็นสำหรับการดีบักข้ามโดเมนและการตั้งค่า Gateway

สามารถคัดลอกไปใช้ในคอนฟิกเซิร์ฟเวอร์ได้โดยตรงหรือไม่?

ได้ ผลลัพธ์ที่ได้เหมาะสำหรับการคัดลอกไปวางใน Nginx, Express, Spring Boot, กฎของ Gateway หรือคอนฟิกฝั่งเซิร์ฟเวอร์อื่นๆ เพื่อประหยัดเวลาในการพิมพ์เอง