Kalau kamu pernah ngoding web dan tiba-tiba muncul error panjang yang isinya “blocked by CORS policy”, selamat… kamu baru ketemu salah satu mekanisme keamanan penting di dunia web: CORS.
CORS itu singkatan dari Cross-Origin Resource Sharing.
Bahasanya memang kedengarannya ribet, tapi sebenarnya konsepnya simpel banget.
Gampangnya, CORS itu apa sih?
Bayangin kamu punya rumah (website kamu), dan mau main ke rumah tetangga (API atau resource dari domain lain).
Nah, CORS itu semacam izin dari tetangga yang bilang:
“Kalau kamu mau masuk rumahku, bilang dulu.
Kalau aku izinkan, baru boleh masuk.”
Browser adalah satpamnya.
Dia yang ngecek apakah tetangga (server API) memberikan izin buat kamu.
Apa yang dimaksud dengan ‘Origin’?
Origin itu kombinasi dari:
- Protocol — http / https
- Domain — example.com
- Port — :3000, :8080, dll
Kalau salah satu beda, itu sudah dianggap origin berbeda.
Contoh:
| Website | API | Origin Sama? |
|---|---|---|
| https://myapp.com | https://myapp.com/api | ✅ iya |
| https://myapp.com | https://api.myapp.com | ❌ beda |
| http://localhost:3000 | http://localhost:8000 | ❌ beda |
Kalau origin beda → CORS mulai kerja.
Kenapa CORS Penting?
Supaya website jahat gak bisa seenaknya ngambil data sensitif dari domain lain tanpa izin.
Browser akan bertanya ke server API:
“Hey, apakah website ini boleh ambil data kamu?”
Kalau server bilang “iya”, dia akan ngirim header kayak:
Access-Control-Allow-Origin: https://myapp.com
Kalau server diam atau tidak izin → browser blok.
Kenapa sering muncul error CORS?
Kebanyakan error CORS terjadi bukan karena kode kita salah, tapi karena server API-nya belum ngasih izin domain kita.
Error umumnya begini:
Access to fetch at 'https://api.example.com' from origin 'http://localhost:3000'
has been blocked by CORS policy.
Artinya:
Server API belum mengizinkan localhost:3000 buat mengaksesnya.
CORS bekerja seperti apa?
CORS bekerja dengan menambahkan HTTP header khusus pada server.
Beberapa header penting:
- Access-Control-Allow-Origin
Mengizinkan origin mana yang boleh akses. - Access-Control-Allow-Methods
HTTP method apa saja yang boleh (GET, POST, PUT, DELETE, dll). - Access-Control-Allow-Headers
Header apa saja yang boleh dikirim oleh client. - Access-Control-Allow-Credentials
Kalau kamu mau kirim cookies atau token tertentu.
Kamu tidak mengatur ini di frontend.
Yang mengatur adalah server / backend.
Preflight Request (OPTIONS): Apa lagi ini?
Kadang sebelum browser benar-benar mengirim request, browser akan kirim dulu request “cek izin”.
Namanya preflight dengan method OPTIONS.
Tujuannya mengecek:
- boleh pakai method ini gak?
- boleh pakai header ini gak?
- origin-nya diizinkan gak?
Kalau preflight gagal → request utama gagal.
Contoh CORS yang Diizinkan
Jika server mengizinkan semua origin:
Access-Control-Allow-Origin: *
Artinya siapa pun boleh akses.
Ini aman untuk API publik, tapi tidak disarankan untuk data sensitif.
Contoh Kasus Sehari-hari
1. Kamu ngoding di localhost
Frontend: http://localhost:3000
Backend: http://localhost:8000
Karena beda port → beda origin → CORS aktif.
2. Kamu panggil API orang lain
Misal API cuaca, API berita, API pembayaran.
Kalau API-nya gak izinin → error CORS.
3. Hosting frontend dan backend beda domain
Ini sangat umum untuk aplikasi modern.
Intinya CORS itu…
- Bukan error dari frontend.
- Bukan salah kode CSS/HTML/JS kamu.
- Bukan bug browser.
Tapi adalah aturan keamanan yang harus diset di server API.
Frontend hanya “korban” yang dapat notifikasinya 😂.
Tips Supaya Tidak Terjebak Error CORS
- Selalu cek domain backend mengizinkan origin kamu.
- Kalau API kamu sendiri, aktifkan CORS di backend.
- Kalau API orang lain → kamu harus pakai proxy kalau tidak punya izin.
- Untuk dev environment, izinkan semua origin dulu → produksi baru diperketat.
Kesimpulan
CORS memang sering bikin pusing di awal, terutama buat pemula, tapi kalau kamu sudah ngerti konsepnya, semuanya jadi masuk akal. Browser bukan mau mempersulit, tapi melindungi aplikasi kita dari serangan.
