Konfigurasi CORS di Server: Express dan Laravel

Daftar tamu di meja satpam

Satpam gedung tidak mengizinkan sembarang orang masuk; ia memeriksa daftar tamu. Konfigurasi CORS di server adalah "daftar tamu" itu: daftar origin (domain frontend) yang diizinkan mengakses API, method apa yang boleh, dan apakah boleh membawa credential (cookie/token).

Kenapa konfigurasi ini sering salah

CORS error adalah error paling sering ditanyakan pemula, dan 90% solusinya ada di server, bukan di frontend. Kesalahan konfigurasi umum: mengizinkan semua origin saat development lalu lupa mengunci saat production, atau memakai wildcard bersama credential yang memang dilarang standar.

Contoh 1: konfigurasi di Express (Node.js)

const cors = require("cors");

app.use(cors({
  origin: "https://app.contoh.id",
  methods: ["GET", "POST", "PUT", "DELETE"],
  allowedHeaders: ["Content-Type", "Authorization"],
  credentials: true
}));

Hanya https://app.contoh.id yang diizinkan. credentials: true mengizinkan cookie dikirim lintas origin, tapi ingat: kalau credentials true, origin TIDAK boleh *, harus spesifik.

Contoh 2: konfigurasi di Laravel

// config/cors.php
return [
    "paths" => ["api/*"],
    "allowed_origins" => ["https://app.contoh.id"],
    "allowed_methods" => ["GET", "POST", "PUT", "PATCH", "DELETE"],
    "allowed_headers" => ["Content-Type", "Authorization"],
    "supports_credentials" => true,
];

Pola sama, sintaks beda. Untuk development lokal, tambahkan http://localhost:3000 ke daftar origin. Jangan pernah memakai * di production untuk API yang butuh auth.

Kesalahan umum

Salah: Access-Control-Allow-Origin: * + credentials. Kombinasi ini ditolak browser. Yang benar: origin spesifik + Access-Control-Allow-Credentials: true.

Salah: lupa mengizinkan header kustom. Frontend mengirim X-Request-Id tapi tidak ada di allowedHeaders, preflight gagal. Yang benar: daftarkan semua header kustom yang dipakai frontend.

Salah: konfigurasi beda antara development dan production. Di lokal longgar, di production ketat, lalu bingung kenapa error hanya di production. Yang benar: pakai environment variable untuk daftar origin.

Salah: mencoba memperbaiki CORS dari frontend. Tidak bisa. Kebijakan ini ditegakkan browser berdasarkan header server. Yang benar: selalu perbaiki di server.

Checklist CORS sebelum production

1. Origin production sudah spesifik (bukan *), termasuk versi www dan non-www kalau dipakai.
2. http://localhost:3000 (atau port dev-mu) ada di daftar untuk development.
3. Semua header kustom frontend terdaftar di allowedHeaders.
4. Kalau pakai cookie lintas origin: credentials true + origin spesifik (bukan wildcard).
5. Method yang dipakai frontend semua terdaftar (jangan lupa OPTIONS otomatis).
6. Test dari domain production asli, bukan cuma localhost.

Enam poin ini menyelesaikan 99% error CORS yang muncul saat deploy. Simpan sebagai template checklist tim.

Catatan teknis: Untuk API yang hanya dipakai server-to-server atau aplikasi mobile, CORS tidak relevan (tidak ada browser yang menegakkan). Tapi begitu ada frontend web, konfigurasi ini wajib benar sejak hari pertama.