Penguji CORS

Uji dan nyahpepijat dasar CORS (Cross-Origin Resource Sharing) dan permintaan API

Tetapan Permintaan

Konfigurasi permintaan API anda untuk pengujian

URL

Kaedah HTTP

Pengepala

Contoh Permintaan

Cuba permintaan API yang telah ditetapkan ini

Maklumat CORS

Maklumat asas tentang CORS

Apa itu CORS? CORS (Cross-Origin Resource Sharing) adalah mekanisme yang membenarkan pelayar web membuat permintaan lintas asal (domain, protokol, atau port yang berbeza) dari skrip yang berjalan dalam pelayar.

Pengepala CORS Utama

Access-Control-Allow-Origin: Menentukan asal yang dibenarkan untuk mengakses sumber
Access-Control-Allow-Methods: Menentukan kaedah HTTP yang dibenarkan
Access-Control-Allow-Headers: Menentukan pengepala HTTP yang boleh digunakan
Access-Control-Allow-Credentials: Menentukan sama ada untuk memasukkan kelayakan (kuki, pengesahan HTTP)

💡 Penyelesaian CORS

Penyelesaian Sisi Pelayan

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 { ... }

Penyelesaian Sisi Klien

1. Menggunakan Pelayan Proksi:

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

2. JSONP (GET sahaja):

// Penyelesaian terhad tetapi mudah
          fetch('api?callback=handleResponse')

🔧 Konfigurasi CORS mengikut Persekitaran

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"

Konfigurasi CORS mengikut Persekitaran

Senario Ujian

• Permintaan Mudah: Uji tingkah laku CORS asas dengan permintaan GET
• Permintaan Pra-penerbangan: Uji permintaan pra-penerbangan dengan kaedah PUT/DELETE
• Pengepala Tersuai: Uji permintaan dengan pengepala Kebenaran
• Kelayakan: Uji permintaan dengan kuki
• Pengendalian Ralat: Uji senario kegagalan

Pertimbangan Keselamatan

• Berhati-hati dengan penggunaan wildcard (*) kerana risiko keselamatan
• Prinsip keistimewaan paling rendah: Hanya benarkan asal dan kaedah yang diperlukan
• Sekatan kelayakan: Hanya benarkan asal tertentu apabila memasukkan kelayakan
• Semakan berkala: Semak dan kemas kini dasar CORS secara berkala