toolsmoah

Penguji CORS

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

Tetapan Permintaan
Konfigurasi permintaan API anda untuk pengujian
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

Petua Nyahpepijat CORS

Alat Pembangun Pelayar

  • โ€ข Semak permintaan OPTIONS dalam tab Rangkaian
  • โ€ข Cari mesej ralat CORS dalam Konsol
  • โ€ข Sahkan pengepala CORS dalam Pengepala Respons

Alat Berguna

  • โ€ข Penguji CORS (alat ini)
  • โ€ข Postman (untuk pengujian API)
  • โ€ข arahan curl (untuk pengujian pelayan langsung)
    Penguji CORS