toolsmoah

เครื่องมือทดสอบ CORS

ทดสอบและดีบักนโยบาย CORS (Cross-Origin Resource Sharing) และคำขอ API

การตั้งค่าคำขอ
กำหนดค่าคำขอ API ของคุณสำหรับการทดสอบ
ตัวอย่างคำขอ
ลองใช้คำขอ API ที่กำหนดไว้ล่วงหน้าเหล่านี้
ข้อมูล CORS
ข้อมูลพื้นฐานเกี่ยวกับ CORS

CORS คืออะไร? CORS (Cross-Origin Resource Sharing) เป็นกลไกที่อนุญาตให้เว็บเบราว์เซอร์สร้างคำขอข้ามต้นทาง (โดเมน, โปรโตคอล หรือพอร์ตที่แตกต่างกัน) จากสคริปต์ที่ทำงานในเบราว์เซอร์

ส่วนหัว CORS ที่สำคัญ

  • Access-Control-Allow-Origin: ระบุว่าต้นทางใดได้รับอนุญาตให้เข้าถึงทรัพยากร
  • Access-Control-Allow-Methods: ระบุว่าวิธีการ HTTP ใดได้รับอนุญาต
  • Access-Control-Allow-Headers: ระบุว่าส่วนหัว HTTP ใดสามารถใช้ได้
  • Access-Control-Allow-Credentials: ระบุว่าจะรวมข้อมูลรับรอง (คุกกี้, การรับรองความถูกต้อง HTTP) หรือไม่

💡 โซลูชัน CORS

โซลูชันฝั่งเซิร์ฟเวอร์

1. Express.js (Node.js):

const cors = require('cors');
          app.use(cors({
            origin: 'https://example.com',
            methods: ['GET', 'POST'],
            credentials: true
          }));

2. Spring Boot (Java):

@CrossOrigin(origins = "https://example.com")
          @RestController
          public class ApiController { ... }

โซลูชันฝั่งไคลเอ็นต์

1. การใช้พร็อกซีเซิร์ฟเวอร์:

// package.json (React)
          "proxy": "http://localhost:3001"

2. JSONP (เฉพาะ GET):

// โซลูชันที่จำกัดแต่เรียบง่าย
          fetch('api?callback=handleResponse')

🔧 การกำหนดค่า CORS ตามสภาพแวดล้อม

Next.js

// next.config.js
          module.exports = {
            async headers() {
              return [
                {
                  source: '/api/:path*',
                  headers: [
                    {
                      key: 'Access-Control-Allow-Origin',
                      value: '*'
                    }
                  ]
                }
              ]
            }
          }

Nginx

location /api {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 
              "GET, POST, OPTIONS";
            add_header Access-Control-Allow-Headers 
              "Content-Type, Authorization";
          }

Apache

# .htaccess
          Header always set Access-Control-Allow-Origin "*"
          Header always set Access-Control-Allow-Methods 
            "GET, POST, OPTIONS"
          Header always set Access-Control-Allow-Headers 
            "Content-Type, Authorization"

การกำหนดค่า CORS ตามสภาพแวดล้อม

สถานการณ์การทดสอบ

  • • คำขอแบบง่าย: ทดสอบพฤติกรรม CORS พื้นฐานด้วยคำขอ GET
  • • คำขอ Preflight: ทดสอบคำขอ preflight ด้วยวิธีการ PUT/DELETE
  • • ส่วนหัวแบบกำหนดเอง: ทดสอบคำขอด้วยส่วนหัว Authorization
  • • ข้อมูลรับรอง: ทดสอบคำขอด้วยคุกกี้
  • • การจัดการข้อผิดพลาด: ทดสอบสถานการณ์ความล้มเหลว

ข้อควรพิจารณาด้านความปลอดภัย

  • • ระมัดระวังการใช้ wildcard (*) เนื่องจากความเสี่ยงด้านความปลอดภัย
  • • หลักการสิทธิ์ขั้นต่ำ: อนุญาตเฉพาะต้นทางและวิธีการที่จำเป็นเท่านั้น
  • • ข้อจำกัดข้อมูลรับรอง: อนุญาตเฉพาะต้นทางที่ระบุเมื่อรวมข้อมูลรับรอง
  • • การตรวจสอบปกติ: ตรวจสอบและอัปเดตนโยบาย CORS เป็นระยะ

เคล็ดลับการดีบัก CORS

เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์

  • • ตรวจสอบคำขอ OPTIONS ในแท็บ Network
  • • มองหาข้อความข้อผิดพลาด CORS ใน Console
  • • ตรวจสอบส่วนหัว CORS ใน Response Headers

เครื่องมือที่มีประโยชน์

  • • เครื่องมือทดสอบ CORS (เครื่องมือนี้)
  • • Postman (สำหรับการทดสอบ API)
  • • คำสั่ง curl (สำหรับการทดสอบเซิร์ฟเวอร์โดยตรง)
    เครื่องมือทดสอบ CORS