CORS Error: Penyebab dan 5 Cara Memperbaikinya

Kamu sudah menulis fetch() dengan benar. URL API-nya valid. Saat dibuka lewat Postman, datanya muncul. Tapi di browser, console malah menampilkan tulisan merah: blocked by CORS policy. Itulah CORS error, dan hampir semua developer web pernah mengalaminya.

Kabar baiknya, ini bukan bug di kodemu. Artikel ini menjelaskan kenapa CORS error muncul, cara membaca pesan error-nya, dan 5 cara memperbaikinya.

Apa Itu CORS?

CORS adalah singkatan dari Cross-Origin Resource Sharing. Ini aturan keamanan di browser yang mengatur apakah halaman web boleh mengambil data dari alamat (origin) yang berbeda.

Origin terdiri dari tiga bagian: protokol, domain, dan port. Jika salah satunya beda, browser menganggapnya origin yang berbeda.

Frontend	Backend	Satu origin?
http://localhost:3000	http://localhost:3000/api	Ya
http://localhost:3000	http://localhost:5000	Tidak (port beda)
https://situs.com	http://situs.com	Tidak (protokol beda)
https://situs.com	https://api.situs.com	Tidak (subdomain beda)

Analogi Satpam Gedung

Bayangkan browser sebagai satpam di lobi gedung. Kamu (halaman web) ingin mengambil paket dari gedung sebelah (server API). Satpam kamu akan bertanya ke resepsionis gedung sebelah: “Orang dari gedung ini boleh ambil paket?”

Jika resepsionis menjawab “boleh”, satpam melepas paketnya. Jika resepsionis diam atau menolak, paketnya ditahan. Paketnya sebenarnya sudah sampai, tapi satpam tidak menyerahkannya kepadamu.

Inilah inti CORS. Server tetap memproses request, tetapi browser menahan responsnya. Karena itu Postman tidak pernah kena CORS: Postman bukan browser dan tidak punya satpam.

Penyebab CORS Error yang Paling Sering

1. Server tidak mengirim header Access-Control-Allow-Origin. Ini penyebab paling umum.
2. Origin frontend tidak masuk daftar yang diizinkan. Misalnya server hanya mengizinkan https://situs.com, sementara kamu mengetes dari http://localhost:3000.
3. Preflight request gagal. Untuk request tertentu (method PUT/DELETE atau header custom seperti Authorization), browser mengirim request OPTIONS dulu untuk bertanya izin. Jika server tidak menjawabnya dengan benar, request utama tidak pernah dikirim.
4. Salah memakai credentials. Jika kamu memakai credentials: 'include', server tidak boleh menjawab dengan Access-Control-Allow-Origin: *.
5. Redirect atau error server. Respons error 500 atau redirect kadang tidak membawa header CORS, sehingga yang tampil di console tetap pesan CORS, padahal akarnya error di backend.

Cara Membaca Pesan Error di Console

Pesan di console	Artinya	Perbaiki di
No 'Access-Control-Allow-Origin' header is present	Server belum mengirim izin sama sekali	Konfigurasi CORS backend
...does not match the supplied origin	Origin kamu tidak ada di daftar izin	Daftar origin yang diizinkan
Response to preflight request doesn't pass	Request OPTIONS gagal	Handler preflight dan header
...must not be the wildcard '*' when credentials mode is 'include'	Wildcard bentrok dengan credentials	Isi origin spesifik

Buka tab Network di DevTools, lalu cari request bertanda OPTIONS. Tab ini sering lebih informatif daripada console.

5 Cara Memperbaiki CORS Error

1. Aktifkan CORS di Backend (Express)

Solusi utama selalu ada di server. Untuk Node.js dengan Express:

bash

npm install cors

javascript

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

app.use(cors({
  origin: 'http://localhost:3000'
}));

2. Whitelist Beberapa Origin

Saat development dan production memakai domain berbeda, gunakan daftar izin:

javascript

const allowed = ['http://localhost:3000', 'https://situs.com'];

app.use(cors({
  origin: (origin, callback) => {
    if (!origin || allowed.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Origin tidak diizinkan'));
    }
  }
}));

3. Tangani Preflight dan Header Custom

Jika frontend mengirim header Authorization atau method PUT/DELETE, izinkan secara eksplisit:

javascript

app.use(cors({
  origin: 'https://situs.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

4. Pakai Proxy Saat Development

Kalau API bukan milikmu dan kamu tidak bisa mengubah servernya, minta dev server frontend meneruskan request. Contoh di Vite (vite.config.js):

javascript

export default {
  server: {
    proxy: {
      '/api': 'https://api.contoh.com'
    }
  }
};

Dengan cara ini, browser hanya melihat request ke origin yang sama, sehingga CORS tidak terpicu. Cara ini cocok untuk development, bukan solusi produksi.

5. Atur Header CORS di Web Server atau Platform

Jika backend ada di balik Nginx, tambahkan header di konfigurasinya:

nginx

add_header Access-Control-Allow-Origin "https://situs.com" always;
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;
add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;

Opsi ini berguna untuk backend yang tidak memakai Node.js, atau saat kamu ingin CORS diatur di satu tempat.

Solusi yang Sebaiknya Dihindari

• Ekstensi browser “CORS Unblock”. Hanya bekerja di komputermu. Pengguna lain tetap kena error.
• Access-Control-Allow-Origin: * di API yang berisi data pribadi. Siapa pun bisa membaca responsnya dari situs mana pun.
• Mematikan keamanan browser lewat flag Chrome. Berisiko dan tidak menyelesaikan masalah di produksi.

Checklist Cepat Saat Terkena CORS Error

1. Pastikan errornya benar CORS, bukan error 500 di server.
2. Bandingkan origin frontend dan backend: protokol, domain, dan port.
3. Cek tab Network, lihat request OPTIONS dan header responsnya.
4. Tambahkan origin frontend ke konfigurasi CORS server.
5. Restart server, lalu hard refresh browser (Ctrl + Shift + R).

Pertanyaan yang Sering Diajukan (FAQ)

Kenapa API jalan di Postman tapi kena CORS error di browser?
Karena CORS hanya diterapkan oleh browser. Postman tidak memeriksa kebijakan CORS.

Apakah CORS error bisa diperbaiki dari sisi frontend?
Tidak untuk produksi. Izin harus diberikan oleh server. Dari sisi frontend, kamu hanya bisa memakai proxy saat development.

Apakah mode: 'no-cors' pada fetch menyelesaikan masalah?
Tidak. Mode ini membuat responsnya opaque, artinya tidak bisa kamu baca isinya. Error-nya hilang, tetapi datanya tetap tidak bisa dipakai.

Apakah CORS sama dengan keamanan API?
Bukan. CORS melindungi pengguna di browser. Orang tetap bisa memanggil API-mu langsung lewat curl atau script, jadi autentikasi tetap wajib.

Kesimpulan

CORS error bukan kesalahan kodemu, melainkan browser yang menahan respons karena server belum memberi izin. Perbaikannya hampir selalu di sisi server: aktifkan CORS, whitelist origin yang tepat, dan tangani preflight. Selama development, proxy bisa jadi jalan pintas.

Setelah paham CORS, lanjutkan ke bahasan terkait di blog ini: REST API vs GraphQL, idempotency dalam REST API, dan cara debugging JavaScript untuk pemula.