เครื่องมือตรวจสอบ CORS

แผงตรวจสอบ CORS

จำลอง preflight และคำขอจริงจากฝั่งเซิร์ฟเวอร์ ระบุปัญหาได้อย่างรวดเร็วว่าเกิดจาก Allow-Origin, Allow-Headers หรือ credentials

จำลอง CORS preflight และคำขอจริงจากเซิร์ฟเวอร์ ตรวจสอบส่วนหัวหลัก 6 รายการ ค้นหาข้อผิดพลาดการตั้งค่าข้ามโดเมนอย่างแม่นยำ พร้อมตัวอย่างโค้ด Nginx/Node.js/Spring

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

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

HTTP Headers Checker

HTTP Request Runner

เครื่องมือตรวจสอบห่วงโซ่การเปลี่ยนเส้นทาง

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

ตัวตรวจสอบใบรับรอง SSL

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

  • เมื่อคอนโซลเบราว์เซอร์แสดงข้อผิดพลาด No 'Access-Control-Allow-Origin' header ใช้เครื่องมือนี้ทันทีเพื่อตรวจสอบส่วนหัว CORS ที่อินเทอร์เฟซเป้าหมายส่งคืนจริง
  • ในระหว่างการเชื่อมต่อโปรเจ็กต์ฟรอนต์เอนด์-แบ็กเอนด์แยกกัน ตรวจสอบว่าการตั้งค่า CORS ของแบ็กเอนด์ทำงานถูกต้อง หลีกเลี่ยงการเสียเวลาแก้ไขแบบไม่มีจุดหมาย
  • หลังกำหนดค่า Nginx, Apache reverse proxy หรือ API gateway (Kong/APISIX/Spring Cloud Gateway) ตรวจสอบว่ากฎ CORS ถูกส่งผ่านอย่างถูกต้อง
  • เมื่อคำขอข้ามโดเมนที่มี Cookie ล้มเหลว สลับโหมด credentials เพื่อตรวจสอบความขัดแย้งระหว่าง Allow-Credentials และ Allow-Origin
  • หลังเพิ่มส่วนหัวคำขอที่กำหนดเอง (เช่น X-Token, X-Requested-With) คำขอถูกบล็อก ตรวจสอบว่าได้ประกาศใน Allow-Headers อย่างถูกต้องหรือไม่
  • คำขอข้ามโดเมนด้วยวิธีที่ไม่ใช่ simple method เช่น PUT/DELETE/PATCH ล้มเหลว ตรวจสอบว่า Allow-Methods มีวิธีที่เกี่ยวข้องหรือไม่
  • ฟรอนต์เอนด์ไม่สามารถอ่านส่วนหัวการตอบสนองที่กำหนดเอง (เช่น X-Request-Id, X-Total-Count) ตรวจสอบการตั้งค่า Access-Control-Expose-Headers
  • หลังใช้ CDN การข้ามโดเมนทำงานไม่สม่ำเสมอ ตรวจสอบว่า Vary: Origin ถูกตั้งค่าถูกต้องเพื่อหลีกเลี่ยง CDN แคชการตอบสนองที่ผิด
  • สำหรับข้อผิดพลาดข้ามโดเมนที่เกิดขึ้นเป็นครั้งคราวในสภาพแวดล้อมการผลิต จำลองสถานการณ์ปัญหาและเก็บรักษาข้อความการตอบสนองที่สมบูรณ์สำหรับแบ็กเอนด์ตรวจสอบ
  • เมื่อเรียนรู้หลักการ CORS สังเกตผลของแต่ละส่วนหัวผ่านคำขอจริง เพื่อทำความเข้าใจกลไกข้ามโดเมนให้ลึกซึ้งยิ่งขึ้น

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

  1. กรอกที่อยู่ที่สมบูรณ์ของอินเทอร์เฟซที่ต้องการตรวจสอบในช่อง URL เป้าหมาย (รองรับ http/https ต้องมี path)
  2. กรอก Origin จริงของหน้าฟรอนต์เอนด์ในช่อง Origin ของคำขอ (เช่น https://example.com ต้องมีโปรโตคอลและพอร์ต ไม่ต้องมี path ต่อท้าย)
  3. เลือกวิธีคำขอ HTTP (GET/POST/PUT/DELETE/PATCH/HEAD/OPTIONS) ค่าเริ่มต้นคือ GET
  4. เพิ่มส่วนหัวที่ต้องการส่งในพื้นที่ส่วนหัวคำขอที่กำหนดเอง หนึ่งรายการต่อบรรทัดในรูปแบบเช่น X-Token: abc123 หาก Content-Type เป็นประเภทที่ไม่ใช่ simple type เช่น application/json จะเรียก preflight อัตโนมัติ
  5. ทำเครื่องหมายตัวเลือก "ส่ง credentials" ตามสถานการณ์ของคุณ — ต้องทำเครื่องหมายหากโค้ดฟรอนต์เอนด์ใช้ withCredentials=true หรือ credentials: 'include' ของ fetch
  6. คลิกปุ่ม "เริ่มตรวจสอบ" เครื่องมือจะส่งคำขอ OPTIONS preflight และคำขอจริงตามลำดับจากเซิร์ฟเวอร์ (ถ้า preflight ผ่านหรือไม่จำเป็น)
  7. ดูรายงานการวิเคราะห์: ดูผลประเมินรวมก่อน จากนั้นตรวจสอบสถานะแต่ละส่วนหัว CORS ทีละรายการ ปรับการตั้งค่าเซิร์ฟเวอร์ตามคำแนะนำการแก้ไข แล้วทดสอบใหม่เพื่อยืนยัน

คุณสมบัติ

  • จำลองคำขอ preflight และคำขอจริงจากเซิร์ฟเวอร์โดยตรง ไม่ถูกรบกวนจากแคชและปลั๊กอินของเบราว์เซอร์ ผลลัพธ์ถูกต้องแม่นยำกว่า
  • แสดงการตอบสนอง OPTIONS preflight และคำขอ GET/POST จริงแยกกัน ช่วยระบุได้ชัดเจนว่ามีปัญหาที่ขั้นตอนใด
  • ตรวจสอบส่วนหัว CORS หลัก 6 รายการทีละข้อ: Access-Control-Allow-Origin, Allow-Methods, Allow-Headers, Allow-Credentials, Expose-Headers, Max-Age แต่ละส่วนหัวมีสถานะผ่าน/เตือน/ล้มเหลวแยกกัน
  • ตรวจจับความขัดแย้งคลาสสิกระหว่างสัญลักษณ์ * และโหมด credentials อย่างชาญฉลาด แจ้งเตือนกับดักการตั้งค่าที่พบบ่อยทันที
  • รองรับการกำหนด Origin, วิธี HTTP (GET/POST/PUT/DELETE/PATCH/HEAD/OPTIONS) และส่วนหัวคำขอที่กำหนดเองได้
  • สลับโหมดส่ง credentials (Cookie/ส่วนหัว Authorization/ใบรับรองไคลเอ็นต์ TLS) เพื่อจำลองสถานการณ์ withCredentials=true
  • ตรวจสอบอัตโนมัติว่าส่วนหัว Vary: Origin ถูกตั้งค่าถูกต้องหรือไม่ เพื่อป้องกัน CDN/reverse proxy แคชการตอบสนอง CORS ที่ไม่ถูกต้อง
  • แสดงการตั้งค่า Max-Age ของ preflight cache อย่างมีโครงสร้าง ประเมินผลกระทบต่อประสิทธิภาพจากความถี่ของคำขอ preflight
  • ตรวจสอบการตั้งค่า Access-Control-Expose-Headers ยืนยันว่าส่วนหัวใดที่ JavaScript ของฟรอนต์เอนด์สามารถอ่านได้
  • ให้คำแนะนำการแก้ไขทีละบรรทัด รวมถึงตัวอย่างการตั้งค่าสำหรับเฟรมเวิร์กยอดนิยม Nginx, Apache, Node.js/Express, Spring Boot, Python/Django/Flask
  • บันทึกข้อความดิบของคำขอและการตอบสนองอย่างสมบูรณ์ รวมถึงรหัสสถานะ ส่วนหัวการตอบสนองทั้งหมด และตัวอย่างเนื้อหาการตอบสนอง
  • ระบุความแตกต่างระหว่าง simple request และคำขอที่ต้อง preflight อัตโนมัติ อธิบายว่าทำไมคำขอของคุณถึงเรียกใช้ OPTIONS preflight
  • ตรวจจับปัญหา CORS ในสถานการณ์การเปลี่ยนเส้นทาง (ว่า Origin เปลี่ยนหลังจากการกระโดด 301/302/307/308 หรือไม่)
  • รองรับการตรวจสอบสถานการณ์เนื้อหาผสม HTTPS/HTTP แจ้งปัญหาข้ามโดเมนที่เกิดจากเนื้อหาผสม

อภิธานศัพท์

CORS (Cross-Origin Resource Sharing)
กลไกความปลอดภัยของเบราว์เซอร์ที่กำหนดโดย W3C ช่วยให้เซิร์ฟเวอร์ประกาศว่า origin ใดมีสิทธิ์เข้าถึงทรัพยากรใด โดยเพิ่มชุดส่วนหัวการตอบสนองที่ขึ้นต้นด้วย Access-Control- ในระดับโปรโตคอล HTTP
นโยบายต้นทางเดียวกัน (Same-Origin Policy)
กลไกความปลอดภัยหลักประการหนึ่งของเบราว์เซอร์ ห้าม JavaScript ส่งคำขอ HTTP ไปยังเซิร์ฟเวอร์ต้นทางอื่นตามค่าเริ่มต้น ป้องกันไม่ให้ไซต์ที่เป็นอันตรายอ่านข้อมูลละเอียดอ่อนจากเว็บไซต์อื่น
คำขอ Preflight
คำขอ OPTIONS ที่เบราว์เซอร์ส่งโดยอัตโนมัติสำหรับคำขอข้ามโดเมนที่ไม่ใช่ simple request เพื่อสอบถามเซิร์ฟเวอร์ว่าอนุญาตให้ส่งคำขอจริงหรือไม่ คำขอจริงจะถูกส่งเฉพาะเมื่อ preflight ผ่าน
Simple Request
คำขอข้ามโดเมนที่ตรงตามเงื่อนไขเฉพาะ (วิธี GET/HEAD/POST, ส่วนหัว safelisted เท่านั้น, Content-Type เฉพาะ) ที่ไม่เรียกใช้ preflight คำขอจริงจะถูกส่งโดยตรง
Access-Control-Allow-Origin (ACAO)
ส่วนหัว CORS หลักที่ระบุต้นทางที่อนุญาตให้เข้าถึงทรัพยากร อาจเป็นต้นทางเฉพาะ (เช่น https://example.com) หรือสัญลักษณ์ * ไม่สามารถใช้ * พร้อมกับ credentials
Access-Control-Allow-Methods (ACAM)
ส่วนหัวในการตอบสนอง preflight ที่ระบุวิธี HTTP ทั้งหมดที่เซิร์ฟเวอร์รองรับ วิธีหลายรายการคั่นด้วยเครื่องหมายจุลภาค
Access-Control-Allow-Headers (ACAH)
ส่วนหัวในการตอบสนอง preflight ที่ระบุส่วนหัวคำขอทั้งหมดที่เซิร์ฟเวอร์อนุญาต ส่วนหัวที่กำหนดเองที่ฟรอนต์เอนด์ส่งต้องประกาศที่นี่
Access-Control-Allow-Credentials (ACAC)
ส่วนหัวที่บูลีน true ระบุว่าอนุญาตให้คำขอข้ามโดเมนนำ credentials (cookies, Authorization และ credentials อื่นๆ) เมื่อตั้งค่า Allow-Origin ต้องไม่เป็น *
Access-Control-Max-Age (ACMA)
ส่วนหัวในการตอบสนอง preflight ที่ระบุระยะเวลาแคชผลลัพธ์ preflight เป็นวินาที การตั้งค่าที่เหมาะสมช่วยลดคำขอ OPTIONS และปรับปรุงประสิทธิภาพ
Vary: Origin
ส่วนหัวที่บอก CDN/proxies ว่าเนื้อหาการตอบสนองแตกต่างกันตามส่วนหัว Origin แคชต้องรวม Origin เป็นส่วนหนึ่งของคีย์แคชเพื่อป้องกันการปนเปื้อนแคชข้ามโดเมน
ส่วนหัวคำขอ CORS-safelisted
ส่วนหัวคำขอที่สามารถส่งได้โดยไม่ต้องประกาศใน Allow-Headers รวมถึง Accept, Accept-Language, Content-Language, Content-Type (ค่าเฉพาะ) และอื่นๆ
ชื่อส่วนหัวต้องห้าม
ส่วนหัวคำขอที่เบราว์เซอร์ห้าม JavaScript ตั้งค่าโดยทางโปรแกรม เช่น Host, Connection, Cookie, Origin เป็นต้น ส่วนหัวเหล่านี้ถูกควบคุมโดยอัตโนมัติโดยเบราว์เซอร์
คำขอแบบ Credentials
คำขอข้ามโดเมนที่นำ credentials ติดตัว เช่น cookies, ข้อมูล HTTP authentication, ใบรับรอง TLS ต้องประสานงานระหว่างฟรอนต์เอนด์-แบ็กเอนด์ในการตั้งค่า withCredentials และ Allow-Credentials
Access-Control-Expose-Headers
ส่วนหัวที่ระบุส่วนหัวการตอบสนองที่ฟรอนต์เอนด์ JavaScript สามารถอ่านได้ ตามค่าเริ่มต้นเฉพาะส่วนหัวพื้นฐานบางส่วนเท่านั้นที่อ่านได้ ส่วนหัวที่กำหนดเองต้องประกาศที่นี่
วิธี OPTIONS
หนึ่งในวิธี HTTP ที่ใช้ดึงตัวเลือกการสื่อสารที่เซิร์ฟเวอร์รองรับ CORS ใช้เพื่อส่งคำขอ preflight สอบถามเกี่ยวกับวิธี ส่วนหัว credentials ที่อนุญาต
ส่วนหัวคำขอ Origin
ส่วนหัวคำขอที่เบราว์เซอร์เพิ่มโดยอัตโนมัติบอกว่าคำขอปัจจุบันมาจากต้นทางใด (protocol+domain+port) เซิร์ฟเวอร์กำหนดสิทธิ์ข้ามโดเมนตามส่วนหัวนี้
แอตทริบิวต์ crossorigin
แอตทริบิวต์บนองค์ประกอบ HTML (script, img, link และอื่นๆ) ระบุว่าโหลดทรัพยากรด้วย CORS หรือไม่ ค่าได้แก่ anonymous (ไม่มี credentials) และ use-credentials (พร้อม credentials)
โหมดคำขอ no-cors
โหมด fetch API ที่อนุญาตคำขอข้ามโดเมนแต่ส่งได้เฉพาะ simple request เท่านั้น และ JavaScript ไม่สามารถอ่านเนื้อหาการตอบสนอง เทียบเท่ากับการส่ง opaque response

ข้อมูลอ้างอิงส่วนหัวตอบสนอง CORS ฉบับสมบูรณ์

ส่วนหัววัตถุประสงค์ค่าตัวอย่างหมายเหตุ
Access-Control-Allow-Originระบุต้นทางที่อนุญาตให้เข้าถึงข้ามโดเมนhttps://example.com หรือ *ห้ามใช้ * กับ credentials อย่างเด็ดขาด ต้องส่งคืนต้นทางเฉพาะ หากส่งคืนแบบไดนามิกต้องเพิ่ม Vary: Origin
Access-Control-Allow-Methodsระบุวิธี HTTP ทั้งหมดที่เซิร์ฟเวอร์รองรับGET, POST, PUT, DELETE, PATCH, OPTIONSจำเป็นในการตอบสนอง preflight ต้องระบุวิธีทั้งหมดไม่ใช่แค่วิธีคำขอปัจจุบัน
Access-Control-Allow-Headersระบุส่วนหัวคำขอที่อนุญาตทั้งหมดContent-Type, Authorization, X-Tokenจำเป็นเมื่อคำขอ preflight มี Access-Control-Request-Headers ต้องรวมส่วนหัวที่กำหนดเอง
Access-Control-Allow-Credentialsระบุว่าอนุญาต credentials (cookies ฯลฯ) หรือไม่trueต้องเป็น true ตัวพิมพ์เล็ก ห้ามเป็น 1 หรือ True เมื่อตั้งค่า Allow-Origin ต้องไม่เป็น *
Access-Control-Expose-Headersระบุส่วนหัวการตอบสนองที่ JS อ่านได้X-Request-Id, X-Total-Countตามค่าเริ่มต้นอ่านได้เฉพาะ Cache-Control/Content-Language/Content-Type/Expires/Last-Modified/Pragma
Access-Control-Max-Ageเวลาแคชผลลัพธ์ preflight (วินาที)3600Chrome/Firefox จำกัดที่ 86400 วินาที (2 ชั่วโมง) Safari สั้นกว่า ค่า -1 ปิดการแคช
Varyบอก CDN/proxies ว่าส่วนหัวคำขอใดมีผลต่อการตอบสนองOriginต้องเพิ่ม Vary: Origin เมื่อส่งคืน Allow-Origin แบบไดนามิก
Access-Control-Request-Methodส่วนหัวคำขอ preflight บอกเซิร์ฟเวอร์วิธีคำขอจริงPUTเบราว์เซอร์ส่งโดยอัตโนมัติในคำขอ OPTIONS
Access-Control-Request-Headersส่วนหัวคำขอ preflight บอกเซิร์ฟเวอร์ว่าจะส่งส่วนหัวใดcontent-type, x-tokenเบราว์เซอร์ส่งโดยอัตโนมัติในคำขอ OPTIONS

ตารางตัดสินว่าคำขอใดเรียกใช้ Preflight

เงื่อนไขที่เรียกใช้เรียกใช้ Preflight?รายละเอียด
วิธีคำขอนอกเหนือจาก GET/HEAD/POST (PUT/DELETE/PATCH/CONNECT/OPTIONS/TRACE)ใช่ตราบใดวิธีไม่ใช่หนึ่งในสามวิธีนี้ จะเรียกใช้ preflight เสมอแม้ไม่มีส่วนหัวที่กำหนดเอง
Content-Type ไม่ใช่ text/plain, multipart/form-data, application/x-www-form-urlencodedใช่พบบ่อยที่สุด: application/json เรียกใช้ preflight เสมอ
คำขอมีส่วนหัวที่กำหนดเอง (ส่วนหัวที่ไม่ใช่ CORS-safelisted)ใช่เช่น X-Token, X-Requested-With, Authorization ล้วนเรียกใช้ preflight
คำขอใช้ ReadableStream เป็น body (การอัปโหลดสตรีม)ใช่API การอัปโหลดสตรีมของเบราว์เซอร์สมัยใหม่เรียกใช้ preflight
XMLHttpRequest.upload มีการลงทะเบียน event listeners (ตัวรับฟังความคืบหน้าการอัปโหลด)ใช่ใช้ xhr.upload.onprogress จะเรียกใช้ preflight
วิธีคำขอ GET/HEAD/POST, Content-Type เป็นหนึ่งในสามประเภทอย่างง่าย, ไม่มีส่วนหัวที่กำหนดเองไม่นี่คือ simple request ส่งโดยตรงโดยไม่ต้อง OPTIONS
fetch ตั้งค่า mode: 'no-cors'ไม่เรียกใช้ CORS preflight แต่การตอบสนองเป็นแบบ opaqueในโหมดนี้ JS ไม่สามารถอ่านการตอบสนองได้ ส่งได้เฉพาะ simple request
fetch ตั้งค่า credentials: 'include' แต่เงื่อนไขอื่นๆ เป็น simple requestไม่จำเป็นcredentials เพียงอย่างเดียวไม่เรียกใช้ preflight โดยตรง แต่รวมกับเงื่อนไขอื่นจะเรียกใช้
URL เดียวกันเคยเรียกใช้ preflight และอยู่ในช่วงเวลาแคช Max-Ageไม่ (แคชตรง)OPTIONS ไม่ถูกส่งซ้ำในช่วงเวลาแคชเว้นแต่ปิดแคชหรือหมดอายุ

ข้อผิดพลาด CORS ที่พบบ่อยและวิธีแก้ไขอย่างรวดเร็ว

ข้อความข้อผิดพลาดใน Consoleสาเหตุหลักวิธีแก้ไข
No 'Access-Control-Allow-Origin' header is presentการตอบสนองไม่มีส่วนหัว CORS เลย เซิร์ฟเวอร์ไม่ได้กำหนดค่า CORS gateway/proxy ตัดส่วนหัว การตอบสนองข้อผิดพลาด 500/404 ขาดส่วนหัวตรวจสอบการกำหนดค่า CORS ของเซิร์ฟเวอร์ ตรวจสอบว่า Nginx add_header มีพารามิเตอร์ always ตรวจสอบว่าคำขอ OPTIONS ส่งคืน 2xx พร้อมส่วนหัว CORS
Allow-Origin value 'XXX' doesn't match supplied OriginAllow-Origin ที่กำหนดค่าไม่ตรงกับ Origin คำขอจริง การกำหนดค่าผิด (ขีดท้ายเกิน/พอร์ตผิด/http vs https)ตรวจสอบว่า Origin whitelist รวมแหล่งที่มาของคำขอ ยืนยันว่าไม่มีขีดท้ายเกิน www vs non-www เป็นต้นทางต่างกัน
Preflight response doesn't pass access control check: HTTP status not okคำขอ OPTIONS ส่งคืนสถานะที่ไม่ใช่ 2xx เช่น 404/405/500 เส้นทางเซิร์ฟเวอร์ไม่จัดการวิธี OPTIONS Nginx try_files ดักคำขอ OPTIONSตรวจสอบว่าคำขอ OPTIONS ส่งคืน 200/204 กำหนดค่าการตอบสนอง OPTIONS ที่เลเยอร์เซิร์ฟเวอร์/gateway
Method XXX not allowed by Access-Control-Allow-MethodsAllow-Methods ในการตอบสนอง preflight ไม่รวมวิธี HTTP ที่ต้องการ (เช่น PUT ไม่อยู่ในรายการ)ระบุวิธีทั้งหมดที่ต้องการรองรับใน Access-Control-Allow-Methods คั่นด้วยเครื่องหมายจุลภาค
Request header field XXX not allowed by Access-Control-Allow-Headersส่งส่วนหัวที่กำหนดเองแต่ Allow-Headers ไม่ประกาศ ลืม Content-Type: application/json, Authorizationระบุส่วนหัวคำขอที่ใช้ทั้งหมดใน Access-Control-Allow-Headers รวมถึง Content-Type (เมื่อเป็นประเภทที่ไม่ใช่อย่างง่าย)
When credentials flag is true, Allow-Origin cannot be wildcard *เมื่อคำขอมี credentials (withCredentials=true) เซิร์ฟเวอร์ส่งคืน Allow-Origin: * ซึ่งขัดต่อข้อกำหนดห้ามใช้ * ต้องส่งคืนต้นทางเฉพาะตาม Origin คำขอ รวมถึงตั้งค่า Allow-Credentials: true
When credentials flag is true, Allow-Headers cannot be wildcard *Allow-Headers ตั้งค่าเป็น * เมื่อใช้กับ credentialed requests บางเบราว์เซอร์เช่น Chrome ไม่อนุญาตระบุส่วนหัวคำขอที่ใช้จริงทั้งหมด ห้ามใช้ *
Preflight redirect is not allowedคำขอ OPTIONS ส่งคืนการเปลี่ยนเส้นทาง 3xx เบราว์เซอร์ไม่ตามการเปลี่ยนเส้นทางคำขอ preflightตรวจสอบว่าคำขอ OPTIONS ส่งคืน 200 โดยตรง ไม่เปลี่ยนเส้นทาง แก้ไขการกำหนดค่าเซิร์ฟเวอร์เพื่อหลีกเลี่ยงการกระโดด OPTIONS