toolsmoah

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

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

การตั้งค่าคำขอ

กำหนดค่าคำขอ API ของคุณสำหรับการทดสอบ

URL

วิธีการ HTTP

ส่วนหัว

ตัวอย่างคำขอ

ลองใช้คำขอ 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 (สำหรับการทดสอบเซิร์ฟเวอร์โดยตรง)

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

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"; }

# .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"