CORS Checker ช่วยทดสอบว่าคำขอ Cross-Origin จากไซต์ของคุณจะได้รับอนุญาตจากเซิร์ฟเวอร์ปลายทางหรือไม่ โดยมีการรันทั้งคำขอ Preflight (OPTIONS) และคำขอจริง รายงานผลการประเมินว่า ALLOWED (อนุญาต) หรือ BLOCKED (ปิดกั้น) พร้อมแยกรายละเอียดของ Access-Control-Allow-Origin, Methods, Headers และ Credentials เพื่อให้คุณระบุจุดที่ผิดพลาดของคำขอได้อย่างแม่นยำ
"Blocked by CORS" เป็นหนึ่งในข้อผิดพลาดที่น่าสับสนที่สุดในการพัฒนาเบราว์เซอร์ — เนื่องจากเบราว์เซอร์จะปิดกั้นคำขออย่างเงียบเชียบโดยไม่คืนข้อมูลที่เป็นประโยชน์กลับไปยังโค้ดของคุณ และการอ่านส่วนหัว (Header) ของ CORS ดิบๆ ก็น่าเบื่อ CORS Checker จะทำให้ภาพรวมทั้งหมดชัดเจนขึ้น เพียงระบุ URL ปลายทาง, วิธีการ HTTP (Method) และ Origin ที่คุณต้องการทดสอบ (ค่าเริ่มต้นคือหน้าเว็บปัจจุบันของคุณ) และสามารถระบุรายการส่วนหัวของคำขอ (Request Header) ที่คุณต้องการส่งไป (เช่น content-type, authorization ฯลฯ) เครื่องมือจะรันคำขอ Preflight (OPTIONS) (ซึ่งจะถูกเพิ่มโดยอัตโนมัติเมื่อคำขอนั้นไม่ใช่คำขอแบบ "Simple") ตามด้วยคำขอจริง และพาร์สทุกส่วนหัวการตอบกลับของ CORS ที่เกี่ยวข้อง จากนั้นจะแสดงผลการประเมินแยกตามเกณฑ์: Allow-Origin ตั้งค่าถูกต้องหรือไม่, Allow-Methods ครอบคลุม Method ของคุณหรือไม่, ส่วนหัวที่คุณกำหนดเองอยู่ใน Allow-Headers หรือไม่, และ Allow-Credentials ตรงกับแฟลก Credentials ของคุณหรือไม่ ผลลัพธ์สุดท้ายจะชัดเจน — ALLOWED หรือ BLOCKED — พร้อมรายการตรวจสอบรายข้อที่บอกคุณได้อย่างแม่นยำว่าต้องแก้ไขอะไรในฝั่ง Backend
ตรวจจับเมื่อคำขอ Preflight (OPTIONS) ต้องทำงาน (กรณีใช้ Method ที่ไม่ใช่แบบ Simple หรือมีส่วนหัวที่กำหนดเอง) และส่งคำขอให้อัตโนมัติพร้อมส่วนหัว Access-Control-Request-* ที่ถูกต้อง
กฎ CORS แต่ละข้อจะถูกประเมินแยกกัน: การจับคู่ Origin, Method ที่อนุญาต, ส่วนหัวที่อนุญาต, และ Credentials คุณจะเห็นทันทีว่าการตรวจสอบข้อไหนที่ไม่ผ่าน
แถบแบนเนอร์สีเขียว ALLOWED หรือสีแดง BLOCKED ขนาดใหญ่ด้านบน — ไม่ต้องเสียเวลาไล่อ่านส่วนหัวเพื่อหาคำตอบเอง
แสดงทุกส่วนหัวการตอบกลับจากทั้งคำขอ Preflight และคำขอจริง พร้อมไฮไลต์ส่วนหัวที่เกี่ยวกับ CORS โดยเฉพาะ
จำลองเป็น Origin ใดก็ได้ ไม่ใช่แค่หน้าปัจจุบัน — มีประโยชน์สำหรับการทดสอบว่าการเชื่อมต่อจากภายนอก (Third-party) จะถูกจัดการอย่างไร
การตรวจสอบรันจาก Background ของส่วนขยาย ดังนั้นการ Fetch แบบ Cross-origin จะไม่ถูกปิดกั้นโดยนโยบาย CORS ของหน้าเว็บต้นทางเอง
เมื่อ Frontend ของคุณแสดงข้อผิดพลาด CORS ใน Console ให้ใช้เครื่องมือนี้ดูว่าส่วนหัวไหนที่ Backend ขาดไป — รวดเร็วกว่าการไปไล่อ่านเอกสารมาตรฐาน
ก่อนจะเปิดใช้งาน API สาธารณะตัวใหม่ ให้ทดสอบผ่านเครื่องมือนี้เพื่อยืนยันว่าทุกการผสมผสานของ Origin, Method และส่วนหัวทำงานได้ตามที่คาดหวัง
เมื่อต้องเชื่อมต่อกับ API ภายนอก ให้ทดสอบจาก Origin ของคุณพร้อมส่วนหัวที่วางแผนไว้เพื่อยืนยันว่าคำขอจะผ่านไปได้
ตรวจสอบค่า Access-Control-Max-Age เพื่อดูว่าเบราว์เซอร์จะแคชผลลัพธ์ Preflight ไว้นานแค่ไหน — มีประโยชน์เมื่อต้องทดสอบหลังจากเปลี่ยนค่าส่วนหัว
รันการทดสอบ CORS เดียวกันกับ URL ของ Dev, Staging และ Prod เพื่อดักจับการตั้งค่าที่ผิดพลาดเฉพาะในบางสภาพแวดล้อมก่อนที่ผู้ใช้จะเจอ
คลิกไอคอน CORS ใน DevSuite Pro dock แผงควบคุมจะเปิดขึ้นพร้อมช่องใส่ URL, Method, Origin และส่วนหัวของคำขอ
วาง URL ของ API Endpoint ที่คุณต้องการทดสอบ และเลือกวิธีการ HTTP (GET, POST, PUT, DELETE ฯลฯ)
Origin จะเป็นค่าเริ่มต้นของหน้าปัจจุบัน เปลี่ยนได้หากต้องการทดสอบ Origin อื่น ระบุส่วนหัวของคำขอที่กำหนดเองโดยคั่นด้วยเครื่องหมายจุลภาค
เครื่องมือจะรัน Preflight (ถ้าจำเป็น) และคำขอจริง จากนั้นจะแสดงผลการประเมินและรายการตรวจสอบ
หากขึ้นสถานะ BLOCKED รายการตรวจสอบจะบอกว่าส่วนไหนที่ขาดหายไปจากการตอบกลับของเซิร์ฟเวอร์ ให้แก้ไขส่วนหัวในฝั่ง Backend แล้วทดสอบใหม่
ติดตั้ง DevSuite Pro ฟรีและปลดล็อกเครื่องมือสำหรับนักพัฒนามากกว่า 64 รายการสำหรับเบราว์เซอร์ของคุณ
