Header Response & CORS: Aturan Main Beda Domain

Satpam yang memeriksa KTP antar gedung

Bayangkan komplek perkantoran: karyawan gedung A tidak bisa sembarangan masuk gedung B tanpa izin satpam. Browser menerapkan aturan serupa bernama Same-Origin Policy: JavaScript di app.contoh.id tidak boleh membaca response dari api.contoh.id kecuali server mengizinkan lewat header khusus. Mekanisme izin ini disebut CORS (Cross-Origin Resource Sharing).

Kenapa CORS harus ada

Tanpa aturan ini, website jahat bisa diam-diam memanggil API bank-mu lewat browser-mu yang sedang login, lalu mencuri data. Same-Origin Policy adalah tembok pertahanan browser. CORS adalah "pintu resmi" di tembok itu: server yang memang ingin diakses lintas domain bisa membuka izin secara eksplisit lewat header response.

Contoh 1: request yang diizinkan

GET /api/produk HTTP/1.1
Host: api.contoh.id
Origin: https://app.contoh.id

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://app.contoh.id
Content-Type: application/json

[...]

Header Access-Control-Allow-Origin adalah stempel izin satpam: "saya mengizinkan app.contoh.id membaca response ini." Tanpa header itu, browser memblokir JavaScript membaca response, meskipun datanya sebenarnya sudah sampai.

Contoh 2: preflight untuk request kompleks

Untuk request "tidak sederhana" (misalnya POST JSON dengan header Authorization), browser mengirim request pemanasan dulu:

OPTIONS /api/produk HTTP/1.1
Host: api.contoh.id
Origin: https://app.contoh.id
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Authorization

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://app.contoh.id
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Authorization

Baru setelah izin keluar, browser mengirim request aslinya. Di tab Network kamu akan melihat dua request: OPTIONS lalu POST. Itu normal, bukan error.

Kesalahan umum

Salah: mengira error CORS berarti API-nya rusak. API-nya baik-baik saja; yang memblokir adalah browser-mu. Buktinya: request yang sama via Postman atau curl berhasil. Yang benar: perbaiki konfigurasi CORS di server, bukan di frontend.

Salah: memakai Access-Control-Allow-Origin: * bersama credential. Wildcard tidak boleh dipakai kalau request membawa cookie/token. Yang benar: sebutkan origin spesifik, atau tangani daftar origin yang diizinkan di server.

Salah: mematikan keamanan browser untuk development. Menjalankan Chrome dengan flag --disable-web-security memang menghilangkan error, tapi menutupi masalah yang akan muncul di production. Yang benar: konfigurasi CORS yang benar di backend, atau pakai proxy dev server (misalnya Vite proxy).

Catatan teknis: CORS hanya berlaku di browser. Aplikasi mobile, server-to-server, Postman, dan curl tidak terpengaruh. Jadi kalau API-mu hanya dipakai aplikasi mobile, CORS bukan masalah; tapi kalau ada frontend web, konfigurasi CORS wajib benar sejak hari pertama.