Unexpected token < in JSON

Hiba leírása:

Ez a hiba akkor fordul elő, amikor JavaScript kódunk JSON-ként próbál értelmezni egy választ, amely valójában nem JSON – hanem például HTML.

Uncaught SyntaxError: Unexpected token < in JSON at position 0

A < karakter gyakran egy HTML válasz első karaktere (pl. <html>), így ha a válasz HTML, a JSON.parse() vagy response.json() elhasal.

💥 Tipikus hibás kód

fetch('/api/data')
  .then(response => response.json()) // ❌ Unexpected token < in JSON
  .then(data => console.log(data));

Ha a szerver valójában hibát (pl. 404, 500) vagy HTML-t küld vissza, ez a hiba történik.

—

✅ Megoldás

  1. Válasz típusának ellenőrzése: 
    fetch('/api/data')
  .then(response => {
    const type = response.headers.get('content-type');
    if (type && type.includes('application/json')) {
      return response.json();
    } else {
      throw new Error('Nem JSON választ kaptunk');
    }
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));
  2. Nyers válasz loggolása: 
    fetch('/api/data')
  .then(response => response.text())
  .then(text => {
    try {
      const data = JSON.parse(text);
      console.log(data);
    } catch (err) {
      console.error('Hiba a JSON értelmezés során:', text);
    }
  });
—

🧠 Miért történik ez?

Ez a hiba nem JavaScript szintaktikai probléma, hanem az API válaszának típusa nem egyezik azzal, amit a kód elvár.

Gyakori okok:

  • API endpoint nem létezik vagy hibát dob (404, 500)
  • Az API HTML válaszoldalt küld vissza
  • A válasz content-type nem JSON
—

🧪 Tipp fejlesztőknek

  • Nézd meg a hálózati választ a böngésző „Network” tabján
  • Logolj minden választ response.text()-tel először
  • Használj proxy szervert fejlesztéshez, hogy elkerüld a CORS hibákat
—

🧯 Összefoglalás

Ez a hiba könnyen megelőzhető, ha minden fetch válasz előtt ellenőrizzük a tartalom típusát, és nem feltételezzük automatikusan, hogy JSON-t kapunk. A robustus frontend kód elengedhetetlen eleme a megfelelő hibakezelés API hívások esetén is.

🔗 Kapcsolódó hibák: