toolsmoah

Penguji CORS

Uji dan debug kebijakan Cross-Origin Resource Sharing (CORS) dan permintaan API

Pengaturan Permintaan
Konfigurasikan permintaan API Anda untuk pengujian
Contoh Permintaan
Coba permintaan API yang telah ditentukan ini
Informasi CORS
Informasi dasar tentang CORS

Apa itu CORS? CORS (Cross-Origin Resource Sharing) adalah mekanisme yang memungkinkan browser web membuat permintaan lintas-asal (domain, protokol, atau port yang berbeda) dari skrip yang berjalan di browser.

Header CORS Utama

  • Access-Control-Allow-Origin: Menentukan asal mana yang diizinkan untuk mengakses sumber daya
  • Access-Control-Allow-Methods: Menentukan metode HTTP mana yang diizinkan
  • Access-Control-Allow-Headers: Menentukan header HTTP mana yang dapat digunakan
  • Access-Control-Allow-Credentials: Menentukan apakah akan menyertakan kredensial (cookie, otentikasi HTTP)

💡 Solusi CORS

Solusi Sisi Server

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

Solusi Sisi Klien

1. Menggunakan Server Proksi:

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

2. JSONP (hanya GET):

// Solusi terbatas tapi sederhana
          fetch('api?callback=handleResponse')

🔧 Konfigurasi CORS berdasarkan Lingkungan

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 berdasarkan Lingkungan

Skenario Tes

  • • Permintaan Sederhana: Uji perilaku CORS dasar dengan permintaan GET
  • • Permintaan Preflight: Uji permintaan preflight dengan metode PUT/DELETE
  • • Header Kustom: Uji permintaan dengan header Otorisasi
  • • Kredensial: Uji permintaan dengan cookie
  • • Penanganan Kesalahan: Uji skenario kegagalan

Pertimbangan Keamanan

  • • Berhati-hatilah dengan penggunaan wildcard (*) karena risiko keamanan
  • • Prinsip hak istimewa terendah: Hanya izinkan asal dan metode yang diperlukan
  • • Pembatasan kredensial: Hanya izinkan asal tertentu saat menyertakan kredensial
  • • Tinjauan berkala: Tinjau dan perbarui kebijakan CORS secara berkala

Kiat Debugging CORS

Alat Pengembang Browser

  • • Periksa permintaan OPTIONS di tab Jaringan
  • • Cari pesan kesalahan CORS di Konsol
  • • Verifikasi header CORS di Header Respons

Alat yang Berguna

  • • Penguji CORS (alat ini)
  • • Postman (untuk pengujian API)
  • • Perintah curl (untuk pengujian server langsung)