Cara Mengatasi CORS Error di JavaScript (Fetch, Axios, & Laravel)

Kalau Anda pernah memanggil API dari JavaScript dan mendapat pesan seperti ini di console:

Access to fetch at 'https://api.contoh.com/data' from origin
'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

...maka Anda sedang berhadapan dengan CORS error. Ini salah satu error paling membingungkan bagi developer pemula karena kode JavaScript-nya terlihat benar, tapi request tetap gagal. Artikel ini menjelaskan apa itu CORS, mengapa muncul, dan — yang terpenting — di mana perbaikan yang benar dilakukan.

Apa Itu CORS?

CORS (Cross-Origin Resource Sharing) adalah mekanisme keamanan browser. Secara default, browser melarang JavaScript di satu origin (kombinasi protokol + domain + port) mengakses resource di origin berbeda, kecuali server tujuan secara eksplisit mengizinkannya lewat header Access-Control-Allow-Origin.

Contoh origin yang dianggap berbeda:

• http://localhost:3000 vs http://localhost:8000 (beda port)
• http://situs.com vs https://situs.com (beda protokol)
• https://situs.com vs https://api.situs.com (beda subdomain)

Kesalahpahaman Terbesar: CORS Bukan Diperbaiki di JavaScript

Ini poin paling penting. CORS tidak bisa diperbaiki dari sisi klien (fetch/Axios). Menambahkan header di request Anda tidak akan membantu, karena aturannya ditegakkan browser berdasarkan respons dari server. Jadi solusi yang benar adalah mengizinkan origin Anda di server API — atau memakai proxy. Mari lihat caranya per platform.

Solusi 1: Izinkan CORS di Laravel

Laravel sudah punya konfigurasi CORS bawaan di config/cors.php. Untuk mengizinkan request dari front-end Anda:

// config/cors.php
return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:3000', 'https://app.domainanda.com'],
    'allowed_headers' => ['*'],
    'supports_credentials' => true,
];

Setelah mengubah file ini, jalankan php artisan config:clear. Hindari memakai '*' di allowed_origins bila supports_credentials bernilai true — kombinasi itu ditolak spesifikasi CORS.

Solusi 2: Izinkan CORS di PHP Native

Kalau API Anda PHP biasa (tanpa framework), tambahkan header di paling atas file endpoint:

<?php
header('Access-Control-Allow-Origin: https://domainanda.com');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization');

// Tangani preflight request (OPTIONS)
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(204);
    exit;
}

Solusi 3: Izinkan CORS di Node.js / Express

const cors = require('cors');
app.use(cors({
    origin: 'http://localhost:3000',
    credentials: true
}));

Memahami "Preflight Request" (OPTIONS)

Untuk request tertentu (mis. mengirim JSON dengan header Content-Type: application/json atau method PUT/DELETE), browser lebih dulu mengirim request OPTIONS untuk "bertanya izin". Kalau server tidak menjawab request OPTIONS ini dengan benar, Anda akan tetap kena CORS error walau endpoint utamanya sudah diizinkan. Pastikan server menangani method OPTIONS (lihat contoh PHP di atas).

Solusi Sementara Saat Development: Proxy

Kalau Anda tidak bisa mengubah server API (misalnya API pihak ketiga), gunakan proxy di lingkungan development. Contoh di Vite (vite.config.js):

export default {
    server: {
        proxy: {
            '/api': {
                target: 'https://api.contoh.com',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    }
}

Dengan ini, front-end memanggil /api/data (same-origin), lalu dev server yang meneruskannya ke API asli — sehingga browser tidak memblokir.

Jangan Lakukan Ini

• Jangan memasang ekstensi browser "disable CORS" sebagai solusi produksi — itu hanya menutupi masalah di komputer Anda, bukan untuk pengguna.
• Jangan menambahkan header Access-Control-Allow-Origin di request JavaScript — header itu milik respons server.

Kesimpulan

CORS error muncul karena browser melindungi pengguna dari akses lintas-origin yang tidak diizinkan. Solusi yang benar selalu ada di sisi server: izinkan origin front-end Anda lewat header Access-Control-Allow-Origin, dan pastikan request preflight OPTIONS ditangani. Untuk API pihak ketiga yang tidak bisa diubah, gunakan proxy. Begitu Anda memahami bahwa CORS itu aturan server-to-browser, error ini jadi jauh lebih mudah diatasi.