Cara Mengatasi Error CORS Policy di Frontend dan Backend

Tembok Keamanan Browser yang Menjengkelkan

Kamu sudah membuat Backend API di localhost:5000. Kamu mengetesnya di Postman dan hasilnya sukses besar! Tapi, saat kamu memanggil API tersebut dari Frontend React-mu (yang berjalan di localhost:3000), datanya tidak muncul. Saat kamu buka Inspect Element, Console memerah dengan tulisan: "Has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present."

Selamat! Kamu baru saja lulus ujian pertama sebagai Web Developer sejati. Jangan panik, kodemu tidak rusak. Ini adalah fitur keamanan standar dari Browser.

Apa Itu CORS?

CORS (Cross-Origin Resource Sharing) adalah mekanisme keamanan milik Browser (seperti Google Chrome). Aturan dasarnya sangat ketat: Sebuah halaman web (Frontend) TIDAK BOLEH mengambil data dari server (Backend) yang memiliki nama domain atau Port yang berbeda, KECUALI server tersebut memberikan izin secara tertulis.

Karena localhost:3000 (Frontend) dan localhost:5000 (Backend) dianggap sebagai dua alamat/asal (Origin) yang berbeda, Chrome memblokir pertukaran data tersebut demi mencegah serangan peretasan (seperti *hacker* yang mencoba mencuri API-mu dari website mereka).

Bagaimana Cara Mengatasinya?

Kesalahan terbesar pemula adalah mencari cara mematikan CORS di Frontend (React/Vue) atau menginstal ekstensi CORS Unblock di Chrome. Itu salah besar! Error CORS HANYA BISA DAN HARUS DISELESAIKAN DARI SISI BACKEND.

Server Backend-mu harus dimodifikasi agar secara eksplisit berkata: "Tenang Chrome, saya mengizinkan website localhost:3000 untuk mengambil data dari saya kok!"

Contoh Solusi di Express.js (Node.js)

Jika kamu menggunakan Node.js dengan framework Express, solusi termudahnya adalah meng-install *library* resmi bernama cors.

// 1. Install via terminal: npm install cors
const express = require('express');
const cors = require('cors');
const app = express();

// 2. Gunakan Middleware CORS sebelum memanggil routes (API)
app.use(cors({
  origin: 'http://localhost:3000', // Hanya izinkan web React ini
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
}));

app.get('/api/data', (req, res) => {
  res.json({ pesan: "Sukses tanpa error CORS!" });
});

Dengan menambahkan Header izin Access-Control-Allow-Origin dari sisi Backend, Browser pengunjung akan langsung membuka palang pintunya dan datamu akan mengalir mulus ke Frontend.