Penguji CORS

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

Pengaturan Permintaan

Konfigurasikan permintaan API Anda untuk pengujian

URL

Metode HTTP

Header

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