CORS dijelaskan sederhana: kenapa browser memblokir permintaan API Anda
CORS (Cross-Origin Resource Sharing) adalah aturan browser yang menentukan apakah halaman dari satu origin boleh membaca respons dari origin lain. Galat CORS muncul karena server API belum mengizinkan origin tersebut lewat header yang tepat. Solusinya ada di server, bukan di kode frontend.
Apa itu origin dan kenapa CORS ada?
Origin adalah gabungan skema, domain, dan port. Alamat https://app.contoh.com dan https://api.contoh.com dianggap origin berbeda. Browser memakai kebijakan same-origin untuk mencegah situs jahat membaca data akun Anda dari situs lain.
CORS adalah pengecualian terkontrol dari kebijakan itu. Server menyatakan secara eksplisit origin mana yang boleh membaca responsnya.
Bagaimana alur permintaan CORS bekerja?
Untuk permintaan sederhana, browser langsung mengirim lalu memeriksa header respons. Untuk permintaan yang memakai metode seperti PUT atau header khusus, browser lebih dulu mengirim permintaan pratinjau dengan metode OPTIONS (preflight).
- Access-Control-Allow-Origin: origin yang diizinkan membaca respons.
- Access-Control-Allow-Methods: metode HTTP yang diizinkan.
- Access-Control-Allow-Headers: header kustom yang boleh dikirim.
- Access-Control-Allow-Credentials: izin mengirim cookie, tidak boleh digabung dengan tanda bintang pada origin.
CORS bukan fitur keamanan server
CORS hanya dijalankan browser. Alat seperti curl atau skrip server tetap bisa memanggil API Anda, jadi autentikasi tetap wajib.
Cara mengaturnya dengan aman
Daftarkan origin yang dipercaya secara eksplisit, jangan memakai tanda bintang untuk API yang menggunakan cookie atau token pengguna.
- Buat daftar putih origin per lingkungan: pengembangan, staging, produksi.
- Balas permintaan OPTIONS dengan status 204 dan header yang sesuai.
- Batasi metode dan header hanya yang benar-benar dipakai.
- Catat permintaan yang ditolak untuk membantu debugging.
Ringkasan dan langkah berikutnya
Saat melihat galat CORS, periksa dulu tab Network pada browser, lihat header respons, lalu ubah konfigurasi di server API.
- Origin = skema + domain + port.
- Metode preflight: OPTIONS.
- Kode status preflight yang umum: 204.
- Rujukan: dokumentasi CORS di developer.mozilla.org.
Topik terkait yang bisa Anda baca berikutnya: pengantar API-first, autentikasi login aplikasi web, OWASP Top 10 untuk aplikasi bisnis, dan JWT atau session cookie.
Kesalahan yang perlu dihindari
Kesalahan umum adalah memasang Access-Control-Allow-Origin dengan tanda bintang di produksi demi cepat selesai, atau memakai ekstensi browser yang mematikan CORS lalu lupa memperbaiki server. Jangan pula memantulkan header Origin dari permintaan tanpa memeriksa daftar putih.
Pertanyaan singkat seputar topik ini
Apa penyebab galat CORS?
Server API belum mengizinkan origin halaman Anda lewat header Access-Control-Allow-Origin. Perbaikannya dilakukan di server, bukan di kode frontend.
Apakah CORS melindungi API dari semua serangan?
Tidak. CORS hanya dijalankan browser. Skrip server atau curl tetap dapat memanggil API, jadi autentikasi dan otorisasi tetap wajib.
Pertanyaan yang sering muncul
Ya, tanpa komitmen. Kami balas dalam 1×24 jam kerja.
Tentang Tim AnabisolutionsStudio digital dari Pekanbaru yang mengerjakan website, aplikasi, dan sistem untuk klien di Riau dan sekitarnya.
Anabisolutions

