Saat membuat website atau aplikasi berbasis JavaScript, salah satu error yang paling sering muncul adalah:
Failed to fetch
Error ini biasanya muncul ketika website gagal mengambil data dari API atau server.
Masalah ini dapat disebabkan oleh berbagai faktor seperti CORS, URL API yang salah, server offline, hingga kesalahan konfigurasi hosting.
Pada artikel ini kita akan membahas penyebab dan cara mengatasi error Failed to Fetch secara lengkap.
Apa Itu Error Failed to Fetch?
Error Failed to Fetch muncul ketika browser tidak berhasil mengambil data dari server menggunakan Fetch API.
Contoh kode:
fetch('https://api.website.com/data')
.then(res => res.json())
.then(data => console.log(data))
Jika koneksi gagal, browser akan menampilkan:
TypeError: Failed to fetch
Penyebab Error Failed to Fetch
1. URL API Salah
Contoh:
https://apiwebsaya.com/dtaa
Padahal yang benar:
https://apiwebsaya.com/data
Solusi:
Pastikan endpoint API sudah benar.
2. Server Sedang Offline
Coba akses API langsung melalui browser.
Jika muncul:
404 Not Found
atau
500 Internal Server Error
Maka masalah berasal dari server.
3. Error CORS
Ini penyebab paling umum.
Browser memblokir request karena domain website berbeda dengan domain API. CORS dan error jaringan/API termasuk penyebab paling sering pada aplikasi web modern.
Contoh:
website.com
mengakses
api.websiteku.com
tanpa izin CORS.
Solusi server:
header("Access-Control-Allow-Origin: *");
4. HTTPS dan HTTP Berbeda
Contoh:
Website:
https://website.com
API:
http://api.website.com
Browser modern akan memblokir request tersebut.
Solusi:
Gunakan HTTPS pada kedua sisi.
5. Format Response Tidak Valid
Contoh:
response.json()
Tetapi server mengirim:
Error Server
Akibatnya browser gagal membaca data.
Cara Debug Error Failed to Fetch
Buka:
F12
→ Network
→ Fetch/XHR
Periksa:
- Status Code
- Response
- Request URL
- Error CORS
Menu Developer Tools biasanya langsung menunjukkan sumber masalah.
Cara Mencegah Error Failed to Fetch
- Gunakan HTTPS
- Validasi URL API
- Aktifkan CORS
- Tangani error dengan try-catch
- Monitor log server
- Uji API sebelum deployment
Contoh:
try {
const response = await fetch(url);
if(!response.ok){
throw new Error("API Error");
}
} catch(error){
console.log(error);
}
Kesimpulan
Error Failed to Fetch biasanya disebabkan oleh:
- URL API salah
- Server offline
- CORS
- HTTPS tidak sesuai
- Response API tidak valid
Dengan memeriksa Network Tab dan konfigurasi server, masalah ini umumnya dapat diselesaikan dalam beberapa menit.
