Pengujian CORS
Kesalahan CORS biasanya ditandai dengan kode merah klasik di konsol peramban: Anda mengakses API dari asal yang berbeda dan peramban memblokir responsnya. Alat pengujian ini mengirimkan permintaan preflight OPTIONS ke setiap URL yang Anda masukkan, dengan origin dan metode yang Anda pilih, kemudian mendekode header Access-Control-* agar Anda dapat melihat secara tepat apa yang diizinkan atau diblokir oleh server, serta alasan mengapa peramban menunjukkan kesalahan tersebut.
Cara menguji CORS
-
1
Masukkan URL tujuan
endpoint API yang ingin Anda panggil dari front-end Anda. Masukkan string kueri dan protokolnya.
-
2
Atur metode dan asalnya
GET/POST/PUT/DELETE/PATCH. Origin dapat berupa URL situs Anda atau origin apa pun yang ingin Anda simulasi.
-
3
Pahami preflight
Penguji selalu mengirimkan permintaan OPTIONS dengan origin dan metode yang Anda pilih, plus header Access-Control-Request-Headers: Content-Type, persis seperti preflight yang dikirim peramban sebelum permintaan JSON.
-
4
Jalankan tes
Penguji mengirimkan preflight dan melaporkan status HTTP beserta header respons CORS: Allow-Origin, Allow-Methods, Allow-Headers, Allow-Credentials, dan Max-Age.
-
5
Perbaiki konfigurasi yang salah
Laporan tersebut menunjukkan hal-hal yang tidak tercantum atau salah, seperti ketiadaan atribut Allow-Origin, adanya header yang dilarang, atau metode yang tidak diizinkan.
Header yang penting
| Header | Fungsinya |
|---|---|
| Access-Control-Allow-Origin | Origin mana yang boleh membaca respons |
| Access-Control-Allow-Methods | Preflight: metode mana yang diizinkan |
| Access-Control-Allow-Headers | Preflight: header permintaan mana yang diizinkan |
| Access-Control-Allow-Credentials | Apakah cookie/autentikasi diizinkan |
| Access-Control-Expose-Headers | Header respons mana yang dapat dibaca oleh JS |
| Access-Control-Max-Age | Berapa lama hasil preflight disimpan di cache |
Permintaan sederhana vs. permintaan dengan preflight
Sebuah permintaan dianggap “sederhana” (tanpa preflight) hanya jika semua kondisi berikut terpenuhi:
- Metodenya adalah GET, HEAD, atau POST.
- Header hanya terbatas pada Accept, Accept-Language, Content-Language, dan Content-Type (dengan nilai tertentu).
- Content-Type, jika ada, berupa application/x-www-form-urlencoded, multipart/form-data, atau text/plain.
Hal lain apa pun, isi data JSON, header Authorization, header khusus X-Foo, atau permintaan PUT/DELETE/PATCH, akan memicu preflight OPTIONS. Server wajib merespons preflight dengan header Allow-* yang benar; jika tidak, permintaan sebenarnya tidak akan pernah dikirim.
Kesalahan Umum pada CORS
- “Tidak ada header Access-Control-Allow-Origin” → server tidak menyetel header tersebut. Perbaiki di sisi server, bukan di sisi klien.
- “Mode kredensial mengharuskan Allow-Origin bukan *” → jika Anda mengirim cookie,
Allow-Originharus berupa origin spesifik (atau memantulkan header Origin). - “Header permintaan X tidak diizinkan” → tambahkan X ke
Access-Control-Allow-Headerspada respons preflight. - “Metode tidak diizinkan” → tambahkan metode tersebut ke
Access-Control-Allow-Methods. - “Pengalihan tidak diizinkan dalam preflight” → preflight tidak dapat mengikuti pengalihan. Endpoint OPTIONS harus merespons secara langsung.
Allow-Origin: * vs. memantulkan Origin
Access-Control-Allow-Origin: * bersifat permisif, tetapi tidak dapat dikombinasikan dengan kredensial. Di lingkungan produksi, pantulkan kembali Origin dari permintaan (setelah divalidasi terhadap daftar izin) dan setel Allow-Credentials: true jika Anda memerlukan cookie.
Proxy sebagai solusi sementara
Jika Anda tidak dapat mengontrol server, proxy tipis pada domain Anda sendiri akan menghilangkan CORS sepenuhnya, peramban melihatnya sebagai same-origin. Banyak platform hosting (Vercel, Netlify, Cloudflare) menyediakan aturan rewrite khusus untuk tujuan ini.
Pertanyaan yang Sering Diajukan
Untuk mencegah halaman berbahaya membaca data pribadi di situs lain menggunakan cookie peramban Anda, tanpa CORS mengunjungi evil.com dapat memungkinkan situs tersebut meminta akses ke API internal bank Anda sebagai pengguna Anda. CORS memaksa bank untuk secara eksplisit mengizinkan pembacaan data dari sumber yang berbeda (cross-origin).
Hanya dalam mode pengembangan. Chromium memiliki flag --disable-web-security, namun flag ini memengaruhi semua situs dan berpotensi membahayakan keamanan. Solusi yang tepat adalah penggunaan header di sisi server atau menggunakan proxy.
Postman bukan merupakan peramban, ia mengabaikan CORS sepenuhnya. CORS hanya diterapkan oleh peramban untuk permintaan JavaScript. Server yang digunakan dalam Postman tidak secara otomatis mendukung standar CORS.
Gambar dan tag klasik <script> dapat diunggah dari sumber berbeda tanpa menggunakan CORS, namun kode JavaScript tidak dapat membaca isi gambar tersebut. Sementara itu, <img crossorigin> dan fetch() mewajibkan penggunaan CORS; karena alasan inilah gambar yang dibuat dengan perangkat lunak seperti Canvas akan mengalami masalah jika CORS tidak digunakan.
Alat Terkait
Penganalisis Header Email
Analisis header email mentah secara privat di browser. Tinjau hop Received, waktu, serta metadata SPF, DKIM, DMARC, dan ARC tanpa mengunggah pesan.
Tes kecepatan
Jalankan tes kecepatan internet yang cepat dan gratis langsung di browser. Ukur kecepatan unduh dalam Mbps beserta latensi dan jitter, lalu lihat apakah koneksi Anda siap untuk streaming 4K, gaming, dan panggilan video. Tanpa aplikasi, tanpa pendaftaran.
Apa IP Saya
Lihat alamat IP yang diterima server ini untuk permintaan Anda, apakah IPv4 atau IPv6, serta negara perkiraan bila data GeoIP lokal tersedia.
Pencarian alamat IP
Cari alamat IPv4 atau IPv6 publik untuk melihat negara, wilayah, kota, koordinat, ISP, ASN, organisasi, dan zona waktu secara perkiraan.
Pencarian DNS Terbalik
Cari record PTR untuk alamat IPv4 atau IPv6. Berguna untuk debugging server email, analisis log, dan investigasi filter spam.
Pemeriksa Endpoint API
Uji endpoint HTTP atau HTTPS yang mengizinkan CORS dari browser. Periksa status akhir, header yang diekspos, waktu, dan pratinjau isi yang dibatasi.