failed to fetch hiba – jelentése és megoldása (példával)

Failed to fetch hiba: hálózati hiba, CORS tiltás vagy JSON parse exception. Ellenőrizd a konzolt és a szerver válaszát.

A failed to fetch hiba gyakori JavaScript, API vagy hálózati probléma esetén. A böngésző nem tudja letölteni az adatokat egy URL-ről vagy szerverről, gyakran CORS vagy Mixed Content hiba miatt. Nézzük meg pontosan, mit jelent, mikor jelentkezik, és hogyan oldhatjuk meg.

Mit jelent a failed to fetch hiba?

A hiba azt jelenti, hogy a JavaScript `fetch()` metódusa sikertelenül próbált betölteni egy külső vagy belső erőforrást (általában JSON API-t vagy más adatot). A hibaüzenet nem mindig részletes, így nehéz lehet azonosítani a pontos okot.


Uncaught (in promise) TypeError: Failed to fetch

Gyakori okok

  • Mixed Content: HTTPS oldalról próbálsz HTTP API-t elérni (→ biztonsági blokkolás)
  • CORS hiba: Az API szerver nem engedélyezi a domainről jövő kérést
  • Szerver nem elérhető: API nincs elérhető állapotban, 404/500 hibát dob
  • Hibás URL: Elírás vagy nem létező végpont

Példa hibás fetch kódra


fetch('http://api.sajatoldalam.hu/data')
  .then(res => res.json())
  .then(data => console.log(data));

Ez akkor okoz hibát, ha az oldal HTTPS-en fut, az API viszont csak HTTP-n keresztül érhető el.

Megoldás 1: HTTPS használata


fetch('https://api.sajatoldalam.hu/data')

Mindig használj HTTPS-t, ha maga a weboldal is HTTPS-en keresztül működik, különben Mixed Content hibát kapsz.

Megoldás 2: CORS konfiguráció

Ha az API saját szerveren van, akkor engedélyezned kell a másik domainről érkező kéréseket:


// PHP példa:
header("Access-Control-Allow-Origin: *");

Ha a `*` túl nyitott, akkor céldomain szerint is megadható:
Access-Control-Allow-Origin: https://hibadetektiv.hu

Megoldás 3: Proxy használata

Frontend → saját backend → API → így megkerülheted a CORS korlátokat:


/api/proxy-endpoint → továbbítja a kérést szerver-oldalon

Kapcsolódó hibák

Külső forrás

Hivatalos MDN dokumentáció:
Fetch API – MDN Web Docs

Összefoglalás

A failed to fetch hiba mögött legtöbbször Mixed Content vagy CORS problémák állnak. Ezek javítása fejlesztői szinten gyors és egyszerű lehet, ha ismerjük a hiba okait. Nézz szét további webfejlesztési hibák között, ha további megoldások érdekelnek.