Mengenal Error CORS Saat Fetch API dan Cara Ampuh Mengatasinya

Tulisan Merah yang Meneror Console Browser

Kamu sudah membuat Backend (API) di http://localhost:5000 dan berhasil di-test lewat Postman. Tapi, saat kamu mencoba mengambil data tersebut (fetch) dari Frontend React-mu di http://localhost:3000, console browser langsung memuntahkan error merah bertuliskan: "Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

Jangan panik. Kamu tidak sendirian. Ini adalah ritual inisiasi setiap web developer.

Apa itu CORS?

CORS (Cross-Origin Resource Sharing) Bukanlah sebuah bug atau error dari kodemu. CORS adalah fitur KEAMANAN bawaan dari browser (Google Chrome, Firefox, dll) untuk melindungi pengguna.

Secara default, browser melarang website A (misal: evil-hacker.com) diam-diam mengambil atau mengirim data ke server website B (misal: api.bank-kamu.com). Aturan ini disebut Same-Origin Policy.

Karena Frontend kamu jalan di *port 3000* dan Backend-mu di *port 5000*, browser menganggap keduanya adalah dua entitas/origin yang berbeda. Maka, browser memblokirnya!

Kenapa di Postman berhasil, tapi di browser gagal?

Karena Postman bukan sebuah browser. Postman adalah *tools developer* yang sengaja mengabaikan aturan CORS. CORS murni merupakan mekanisme perlindungan yang hidup di dalam web browser.

Cara Mengatasi Error CORS

Solusi dari error CORS hampir selalu berada di sisi Backend (Server), bukan di Frontend. Server-mu harus "mengizinkan" Frontend-mu lewat header khusus.

Contoh Solusi di Node.js / Express.js:

Cara paling mudah adalah menggunakan package bawaan bernama cors.

// 1. Install dulu di terminal backend: npm install cors

const express = require('express');
const cors = require('cors');
const app = express();

// 2. Gunakan middleware cors SEBELUM mendefinisikan rute API
app.use(cors()); // Ini mengizinkan SEMUA origin (cocok untuk development)

// Untuk level Production, batasi hanya untuk domain frontend-mu:
// app.use(cors({ origin: 'https://website-kamu.com' }));

app.get('/api/users', (req, res) => {
  res.json({ message: 'CORS sudah teratasi!' });
});

app.listen(5000);

Kesimpulan

Saat melihat error CORS, jangan sibuk mengotak-atik kode fetch() atau axios di Frontend-mu. Buka kodemu di Backend, cari konfigurasi CORS-nya, dan pastikan domain Frontend-mu masuk dalam daftar *whitelist* yang diizinkan oleh server.