Perbaiki Akses API yang Diblokir dengan Cara Mengatasi Fetch API CORS Error Javascript

Ditulis oleh JavaScript

Cara mengatasi fetch API CORS error JavaScript yang paling cepat adalah memperbaiki izin di server API, bukan mengubah kode fetch secara acak. Pesan blocked by CORS policy berarti permintaan sudah sampai, tetapi browser menolak memberikan responsnya ke JavaScript karena server tidak mengizinkan origin situs kamu.

Arti Error CORS pada Fetch di Browser

Browser menerapkan aturan same-origin. Fetch ke domain, port, atau skema berbeda dianggap cross-origin dan harus mendapat izin eksplisit dari server.

  • Request terkirim ke server, tetapi objek Response tidak bisa dibaca script.
  • Ini bukan berarti server mati. Server bisa saja merespons normal.
  • Bedakan dengan Failed to fetch karena offline, status 404, status 401 karena token salah, dan Unexpected token karena respons bukan JSON.

Penyebab Umum Fetch Kena Blokir CORS

  • API beda origin tidak mengirim header Access-Control-Allow-Origin.
  • Fetch memakai method PUT, PATCH, DELETE, atau header custom seperti Authorization sehingga browser mengirim preflight OPTIONS dulu.
  • Respons preflight tidak mengizinkan origin, method, atau header yang diminta.
  • URL salah, terjadi redirect ke domain lain, atau fetch memakai credentials: include tetapi server tidak mengizinkan kredensial.

Tabel Troubleshooting Cepat

Error/Kondisi Penyebab Solusi
Access to fetch blocked by CORS policy Origin tidak ada di daftar izin server Tambahkan origin frontend ke Access-Control-Allow-Origin di backend
Preflight request fails / OPTIONS 403 Method atau header tidak diizinkan Aktifkan method dan header tersebut di konfigurasi CORS server
Credential is not supported with wildcard Memakai cookie dengan izin * Ganti wildcard dengan origin spesifik dan aktifkan allow credentials

BACA JUGA:

Cara Memperbaiki Fetch API CORS Error

Ikuti urutan ini agar tidak menebak:

  1. Baca pesan lengkap di Console untuk tahu origin, method, atau header yang ditolak.
  2. Buka tab Network, periksa request OPTIONS dan response header dari server.
  3. Periksa response.ok karena fetch hanya reject untuk network error, bukan untuk status 4xx atau 5xx.
  4. Rapikan fetch di frontend.
  5. Perbaiki konfigurasi CORS di backend.
const res = await fetch("https://api.contoh.id/data", {
  mode: "cors",
  credentials: "same-origin",
  headers: { "Content-Type": "application/json" }
});

if (!res.ok) {
  throw new Error(`HTTP ${res.status}`);
}

const data = await res.json();
console.log(data);

Kode di atas memakai mode CORS normal dan memeriksa status HTTP sebelum membaca JSON. Di backend, kirim origin spesifik frontend, bukan selalu wildcard. Izinkan method dan header yang dipakai aplikasi. Untuk request kredensial, aktifkan izin kredensial di kedua sisi. Jangan menonaktifkan keamanan browser atau memakai ekstensi bypass untuk produksi.

Cara Mencegah CORS Error Terulang

  • Samakan kontrak dengan backend: daftar origin, method, dan header yang boleh dipakai.
  • Buat proxy backend sendiri bila API pihak ketiga butuh secret key. Browser memanggil backend kamu, backend meneruskan ke API eksternal.
  • Validasi endpoint development dan production sebelum deploy karena origin localhost dan domain live berbeda.

FAQ

Apakah mode no-cors bisa memperbaiki CORS error?

Tidak. Mode itu membuat respons menjadi opaque sehingga JavaScript tetap tidak bisa membaca datanya.

Siapa yang harus memperbaiki CORS, frontend atau backend?

Kebijakan CORS dikendalikan server, jadi perbaikan utama ada di backend.

Mengapa API jalan di Postman tetapi error di fetch browser?

Postman tidak menerapkan kebijakan same-origin browser, sedangkan fetch di halaman web wajib mematuhinya.

Artikel Terkait