Cara menggunakan Generator & Tester Header CORS
- Di Buat header, isi daftar origin yang boleh memanggil API kamu (atau izinkan semua), centang method yang dibutuhkan, lalu masukkan header request yang dikirim front end kamu, biasanya
Content-TypedanAuthorization. - Centang Izinkan kredensial hanya jika browser harus mengirim cookie atau header Authorization dengan
credentials: 'include'. - Pilih platform kamu lalu salin kodenya: Express, Nginx, Apache, Netlify, Vercel, Next.js, Workers atau PHP.
- Deploy, lalu beralih ke Uji URL: masukkan URL API dan origin halaman untuk melihat apakah preflight dan request asli akan lolos.
Mengapa browser memblokir request
Halaman di https://app.example.com hanya bisa membaca response dari https://api.example.com jika API memberi izin lewat header CORS. Untuk request yang lebih dari sekadar GET sederhana atau form POST, seperti body JSON, header Authorization, atau PUT dan DELETE, browser akan lebih dulu mengirim preflight: request OPTIONS yang menanyakan “bolehkah origin ini memakai method dan header ini?”. Jika jawabannya tidak ada atau salah, kamu akan melihat pesan “has been blocked by CORS policy” dan kode kamu tidak pernah menerima response.
| Header | Isi yang dibutuhkan |
|---|---|
Access-Control-Allow-Origin | Origin pemanggil secara tepat, atau * (tidak diizinkan dengan kredensial) |
Access-Control-Allow-Methods | Method dari request asli (hanya untuk preflight) |
Access-Control-Allow-Headers | Setiap header request non-standar, seperti Authorization atau Content-Type: application/json |
Access-Control-Allow-Credentials | true jika cookie atau kredensial dikirim |
Access-Control-Max-Age | Berapa lama browser boleh menyimpan jawaban preflight di cache |
Vary: Origin | Diperlukan jika origin yang diizinkan berubah per request, agar cache tidak mengirim jawaban untuk satu origin ke origin lain |
Cara kerja tester
Server kami mengirim request dengan header Origin dan, jika browser memang membutuhkannya, preflight OPTIONS dengan Access-Control-Request-Method dan -Headers, sama seperti yang dilakukan Chrome atau Firefox. Setelah itu, jawabannya dicek terhadap aturan CORS yang diterapkan browser. Server yang hanya mengizinkan alamat IP tertentu atau membutuhkan cookie bisa saja memberi jawaban berbeda untuk pengguna sungguhan. Terkait: HTTP Header Checker, API Tester, Security Headers Checker.
Juga dicari sebagai: generator header cors, cek cors online, tester cors, blocked by cors policy, access-control-allow-origin, cara mengatasi error cors, cors preflight test, express cors.
Tool yang cocok dipakai bersama Generator & Tester Header CORS
- CSP Generator — Pilih apa saja yang dimuat situsmu — script, style, gambar, font, analytics, embed — lalu dapatkan Content-Security-Policy yang hanya mengizinkan itu, dengan peringatan untuk pengaturan yang berisiko.
- cURL ke Code — Tempel perintah curl dari dokumentasi API atau “Copy as cURL” di DevTools browser, lalu dapatkan kode siap pakai untuk enam bahasa, dengan header, body, dan autentikasi yang ikut terbawa.
- Generator Config Nginx — Pilih apa yang harus dilakukan Nginx: menyajikan situs statis atau SPA, meneruskan ke aplikasi Node/Python, atau menjalankan PHP, lalu centang fitur tambahannya.
- Analisis Header Email — Tempel header mentah dari email untuk melihat seluruh perjalanannya: setiap lompatan server beserta waktu tempuhnya, hasil SPF, DKIM dan DMARC, IP asal, serta tanda bahaya seperti Reply-To atau Return-Path yang tidak cocok.