CORS IssueLaravelNext.jsCORSAPI7 mnt baca

Penanganan CORS Origin antara Laravel API dan Next.js

Frontend Next.js di localhost:3000 ditolak saat memanggil Laravel API di localhost:8000: kenapa dan cara memperbaikinya.

1 · Gejala & Log Pesan Error

error.log
Access to fetch at 'http://localhost:8000/api/books' from origin
'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the
requested resource. If an opaque response serves your needs, set
the request's mode to 'no-cors' to fetch the resource with CORS
disabled.

POST http://localhost:8000/api/books net::ERR_FAILED 500

2 · Akar Penyebab Masalah

Browser Menegakkan Same-Origin Policy

Browser memblokir JavaScript di satu origin (mis. localhost:3000) untuk membaca respons dari origin lain (localhost:8000) kecuali server tujuan secara eksplisit mengizinkan lewat header CORS.

Ini bukan bug. Ini fitur keamanan. Error muncul di browser, tapi akar masalahnya ada di konfigurasi server Laravel yang tidak mengirim header Access-Control-Allow-Origin.

Kenapa Sering Terjadi di Dev?

  • Frontend dan backend jalan di port berbeda = origin berbeda.
  • Laravel default hanya mengizinkan origin yang terdaftar di config/cors.php.
  • Request dengan header kustom (mis. Authorization: Bearer) memicu preflight OPTIONS yang juga harus dijawab server.

3 · Solusi & Diff Kode

✕ Sebelum (bermasalah)

before
// config/cors.php: default terlalu ketat untuk dev
'allowed_origins' => [
    // kosong! hanya same-origin yang lolos
],

✓ Sesudah (diperbaiki)

after
// config/cors.php: izinkan origin frontend (dev)
'allowed_origins' => [
    'http://localhost:3000',
],

// ATAU via .env agar fleksibel per environment:
// FRONTEND_URL=http://localhost:3000
'allowed_origins' => [env('FRONTEND_URL')],

Langkah Perbaikan

  1. Daftarkan origin frontend di config/cors.php seperti diff di atas. Untuk production, isi dengan domain asli (mis. https://www.omnidevv.biz.id), jangan pakai * bila request membawa kredensial.
  2. Jangan set mode: 'no-cors di fetch. Itu membuat respons opaque (tidak bisa dibaca), bukan solusi.
  3. Pastikan middleware CORS aktif: di Laravel 11+, pastikan HandleCors terdaftar di bootstrap/app.php.
  4. Test ulang: buka DevTools → tab Network → cek header Access-Control-Allow-Origin pada respons API.

Setelah header muncul, error CORS hilang permanen. Bukan diakali, tapi diselesaikan di tempat yang benar: server.