Fetch Selalu Gagal? Cara Mengatasi Failed To Fetch Javascript

Ditulis oleh JavaScript

Pesan failed to fetch berarti browser gagal menyelesaikan request fetch() di JavaScript. Penyebab paling sering bukan kode salah, melainkan koneksi putus, URL API salah, server down, atau request diblokir CORS. Perbaikan tercepat: buka tab Network di DevTools, lihat apakah request berstatus merah, CORS error, atau 404/500.

Ingat, fetch() hanya reject otomatis untuk network error dan CORS. Status 404 atau 500 tidak memicu catch kecuali kamu memeriksa response.ok sendiri.

Penyebab Failed To Fetch Paling Sering di Browser

Empat kategori ini menutup hampir semua kasus di frontend:

  • Network error: internet mati, DNS gagal, server tidak bisa dijangkau, atau HTTPS dicampur HTTP.
  • CORS: server API tidak mengizinkan origin milikmu. Browser memblokir respons walau server sebenarnya menjawab.
  • URL salah: typo endpoint, slash kurang, query parameter salah, atau base URL beda antara lokal dan production.
  • HTTP status error: 404, 401, 403, 500. Fetch tetap resolve, jadi datanya harus divalidasi manual.

Cek berurutan: pastikan online, salin URL ke tab baru, perhatikan protokol http/https, lalu lihat status server di Network tab.

Tabel Diagnosis Error Failed To Fetch

Buka DevTools dengan F12, masuk tab Network, centang Preserve log, ulangi fetch, lalu klik request yang gagal.

Error/Kondisi Penyebab Solusi
TypeError: Failed to fetch, status (failed) Offline atau server tidak terjangkau Cek koneksi, matikan VPN/adblock, coba ulang request
CORS policy blocked Header CORS server tidak mengizinkan origin Perbaiki konfigurasi server, pakai proxy backend sendiri
404 / 500 Endpoint salah atau server error Perbaiki URL, cek response.ok, baca body error
Unexpected token < in JSON Server mengirim HTML, bukan JSON Cek Content-Type, log response.text() sebelum parse

BACA JUGA:

Perbaiki Fetch Agar Tidak Gagal Lagi

Ikuti urutan ini agar error terbaca jelas:

  1. Validasi URL sebelum dikirim, jangan langsung fetch string mentah.
  2. Periksa response.ok dan lempar error sendiri untuk 404/500.
  3. Tangani network error, HTTP error, dan JSON error secara terpisah.
async function getUsers() {
  try {
    const res = await fetch("https://api.example.com/users");

    if (!res.ok) {
      throw new Error("HTTP error: " + res.status);
    }

    const data = await res.json();
    return data;
  } catch (err) {
    console.error("Fetch gagal:", err.message);
    throw err;
  }
}

Kode tersebut memisahkan tiga kegagalan. Blok try catch menangkap network error dan CORS. Pengecekan !res.ok menangkap 404, 401, dan 500 yang tidak otomatis reject. Pemanggilan res.json() terakhir menangkap respons rusak.

Cegah Error Fetch Terulang di Project Berikutnya

Sebagian besar fetch gagal berulang karena URL dan format respons tidak divalidasi sejak awal.

  • Simpan base URL API di satu file config agar konsisten lokal dan production.
  • Tambahkan timeout dengan AbortController agar request macet tidak menggantung.
  • Periksa Content-Type sebelum memanggil json().
  • Bedakan pesan untuk pengguna: jaringan bermasalah, server sibuk, atau data tidak valid.
  • Jangan panggil API pihak ketiga langsung tanpa backend bila butuh key rahasia.

FAQ

Apakah failed to fetch selalu berarti internet mati?

Tidak. CORS, URL salah, dan server down menampilkan pesan yang sama.

Apakah fetch reject otomatis saat status 404 atau 500?

Tidak. Fetch tetap resolve, kamu wajib memeriksa response.ok atau response.status.

Apakah error failed to fetch berkaitan dengan CORS?

Bisa. Jika console menyebut CORS policy, perbaikannya ada di konfigurasi server, bukan di kode fetch.

Artikel Terkait