CORS: Kenapa API-mu Lancar di Postman Tapi Error Merah di Browser?

Bayangin Budi Baru Selesai Ngoding API...

Bayangin Budi baru selesai bikin API Login pakai Express.js di localhost:4000. Dia tes pakai Postman: kirim request, dapat balasan 200 OK mulus dengan data user lengkap. Budi senyum puas, langsung buka kode React-nya di localhost:3000 dan memanggil API yang sama.

Bukannya data muncul, layar malah dipenuhi tulisan merah menyeramkan di console: Access to fetch has been blocked by CORS policy. Budi panik. Dicek lagi di Postman, API-nya baik-baik saja. Kok bisa beda nasib padahal endpoint dan datanya sama persis?

Masalahnya: Browser Curiga, Postman Tidak Peduli

Yang menolak request Budi bukan Server, tapi Browser itu sendiri. Browser modern punya aturan keamanan bawaan bernama Same-Origin Policy: sebuah halaman web hanya boleh mengambil data secara diam-diam dari origin (kombinasi protokol + domain + port) yang sama dengan dirinya.

localhost:3000 (Frontend React) dan localhost:4000 (Backend Express) dianggap dua Origin yang BERBEDA, walaupun sama-sama bernama localhost! Aturan ini sengaja dibuat supaya website jahat tidak bisa diam-diam mencuri saldo rekeningmu lewat script tersembunyi saat kamu sedang login di tab internet banking sebelahnya. Postman bukan Browser, jadi ia tidak punya polisi Same-Origin Policy ini sama sekali — makanya lolos mulus.

Nah, Di Sinilah 'CORS' Masuk!

CORS (Cross-Origin Resource Sharing) adalah mekanisme di mana Server-lah yang harus memberi izin eksplisit, bukan Browser yang dilonggarkan aturannya.

1. Server menambahkan header ajaib di setiap balasannya: Access-Control-Allow-Origin: http://localhost:3000.
2. Saat Browser menerima balasan ini, ia membaca header tersebut dan berkata: "Oh, Server ini secara resmi mengizinkan tamu dari localhost:3000. Baik, saya izinkan datanya lewat ke aplikasi React."
3. Untuk request yang lebih 'rumit' (pakai method DELETE, atau header Authorization), Browser bahkan mengirim request pengintai dulu bernama Preflight (method OPTIONS) sebelum request aslinya dikirim, hanya untuk bertanya: "Boleh gak nih saya lanjut?"

Di Express.js, ini semudah memasang satu middleware:

import cors from "cors";
app.use(cors({ origin: "http://localhost:3000" }));

Intinya: Jangan asal copy-paste cors({ origin: "*" }) di Production, apalagi kalau API-mu memakai cookie atau credentials. Itu sama saja dengan mencopot satpam gerbang dan mempersilakan siapa saja masuk mengintip data pengguna.