Error CORS: Kenapa Frontend Siti Gak Bisa Nembak API Budi?

Bayangin Siti dan Budi Beda Kompleks...

Bayangin Siti bikin aplikasi Frontend pakai React yang jalan di localhost:3000. Di seberang sana, Budi bikin Backend API pakai Express.js di localhost:5000. Waktu Siti bikin fitur untuk narik data produk pakai fetch() ke API Budi, tiba-tiba layarnya blank.

Siti buka Inspect Element, dan muncul tulisan horor berwarna merah: "Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present". Siti panik dan ngira kodenya salah. Padahal pas di-tes pakai Postman, API Budi jalan lancar 100%!

Masalahnya: Browser Itu Satpam yang Posesif

Kenapa di Postman jalan, tapi di Chrome error? Jawabannya karena Browser itu posesif dan overprotektif. Postman tidak peduli soal keamanan, tapi Browser peduli.

Di dunia web, ada aturan keamanan bernama Same-Origin Policy (SOP). Aturan ini bilang: "Website di port 3000 HANYA boleh ngobrol sama server di port 3000 juga." Karena API Budi ada di port 5000 (Beda Origin/Beda Alamat), Browser menganggap Budi adalah orang asing yang mencurigakan dan langsung memblokir komunikasi mereka!

Nah, Di Sinilah Solusi 'CORS' Masuk!

CORS (Cross-Origin Resource Sharing) adalah sebuah "Surat Izin" resmi. Siti (Frontend) tidak bisa membetulkan ini. Yang harus bertindak adalah Budi (Backend).

• Budi harus menempelkan sebuah Header HTTP khusus di server Express.js miliknya.
• Budi tinggal meng-install library npm install cors, lalu menambahkan kode: app.use(cors({ origin: 'http://localhost:3000' })).
• Dengan kode ini, Budi pada dasarnya berteriak ke Browser Chrome: "Woi Browser! Tenang aja, Siti yang ada di localhost:3000 itu teman gue! Tolong izinin dia masuk ngambil data!"

Intinya: Error CORS bukanlah bug koding, melainkan fitur keamanan standar dari browser. Selalu pastikan Backend-mu sudah mendaftarkan domain Frontend-mu ke dalam daftar tamu VIP (Whitelist)!