Zum Inhalt springen
jsonbeautifiers
Deutsch
V8 Überprüft durch Ausführen des Parsers auf Node v24.15.0, V8 13.6.233.17.

Unexpected token '<', "<!DOCTYPE "... is not valid JSON

Ihr Code hat JSON.parse (oder res.json()) auf ein HTML-Dokument angewendet. Die spitze Klammer an Position 0 ist der Anfang von <!DOCTYPE html>. Das JSON ist nicht fehlerhaft; Sie haben schlicht kein JSON bekommen. Am Parser ist nichts zu reparieren. An der Anfrage schon.

Sie sehen das vielleicht auch so geschrieben

  • Unexpected token < in JSON at position 0
  • Unexpected token '<', "<html><hea"... is not valid JSON
  • SyntaxError: Unexpected token < in JSON at position 0

V8 hat 2022 die meisten seiner JSON-Fehlermeldungen neu formuliert. Die ältere Formulierung ist noch immer das, was die meisten Suchergebnisse zeigen, aber keine aktuelle Laufzeitumgebung gibt sie aus.

Fügen Sie Ihr JSON ein und sehen Sie genau, wo es bricht

Eingabe

Nichts, was Sie einfügen, verlässt Ihren Browser. Die connect-src Erlaubnisliste macht daraus eine Garantie des Browsers statt eines Versprechens. Selbst überprüfen

Was es tatsächlich auslöst

Sortiert danach, wie oft sich das jeweilige als die Antwort herausstellt.

  1. 01 Der Server hat eine Fehlerseite geliefert

    Ein 404, ein 500 oder ein Gateway-Fehler, als HTML gerendert. Viele Frameworks liefern selbst für API-Routen HTML-Fehlerseiten, sofern Sie nicht ausdrücklich JSON anfordern. Prüfen Sie zuerst den Statuscode, nicht den Körper.

    Geht kaputt

    const data = await fetch('/api/user').then((r) => r.json());

    Funktioniert

    const res = await fetch('/api/user', { headers: { Accept: 'application/json' } });
if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
const type = res.headers.get('content-type') ?? '';
if (!type.includes('application/json')) {
  throw new Error(`Expected JSON, got ${type}: ${(await res.text()).slice(0, 200)}`);
}
const data = await res.json();

  2. 02 Eine Single-Page-App hat einen unbekannten Pfad auf index.html umgeschrieben

    Das ist die häufigste Ursache in der Entwicklung. Vite, Create React App und die meisten Entwicklungsserver liefern für jeden unbekannten Pfad index.html aus, sodass ein Tippfehler in einer API-Route oder eine fehlende Proxy-Einstellung Ihre eigene App als HTML mit Status 200 zurückgibt. Deshalb reicht es nicht, nur res.ok zu prüfen.

  3. 03 Die URL löste sich woandershin auf

    Ein relativer Pfad wie fetch("api/user") wird gegen die aktuelle Route aufgelöst, von /settings/profile aus fragt er also /settings/api/user an. Verwenden Sie einen führenden Schrägstrich oder eine absolute URL.

    Geht kaputt

    fetch('api/user')

    Funktioniert

    fetch('/api/user')

  4. 04 Ein Captive Portal, ein VPN oder ein Proxy hat die Anfrage abgefangen

    Hotel-WLAN, ein Firmenproxy oder ein Cloudflare-Bot-Challenge liefert seine eigene HTML-Seite. Das zeigt sich als Fehler, den nur manche Nutzer und nur in manchen Netzen bekommen.

  5. 05 PHP hat vor dem JSON eine Warnung ausgegeben

    Eine Notice oder Warnung, die vor dem Antwortkörper ausgegeben wird, lässt das Dokument mit <br /> statt mit { beginnen. Das JSON ist noch da, hinter dem HTML. Schalten Sie display_errors in der Produktion aus.

Derselbe Fehler in anderen Laufzeitumgebungen

Das zugrunde liegende Problem ist identisch; nur der Wortlaut unterscheidet sich. Meldet eine Kollegin eine dieser Zeilen, sieht sie genau dasselbe wie Sie.

Python Expecting value: line 1 column 1 (char 0)
C# (Newtonsoft) Unexpected character encountered while parsing value: <. Path '', line 0, position 0.
C# (System.Text.Json) '<' is an invalid start of a value. Path: $ | LineNumber: 0 | BytePositionInLine: 0.
Java (Jackson) Unexpected character ('<' (code 60)): expected a valid value

Häufige Fragen

Warum hat sich die Meldung gegenüber „Unexpected token < in JSON at position 0“ geändert?
V8 hat seine JSON-Fehlermeldungen 2022 neu geschrieben, damit sie einen Ausschnitt der störenden Eingabe enthalten. Chrome 104 und neuer sowie Node 18 und neuer geben den neuen Wortlaut aus. Die alte Zeichenkette ist immer noch das, was die meisten Suchergebnisse und Stack-Overflow-Antworten zeigen, aber keine aktuelle Laufzeitumgebung gibt sie aus.
Ist mein JSON kaputt?
Nein. Es ist gar kein JSON im Spiel. Der Parser liest ein HTML-Dokument. Reparieren Sie, was die Anfrage zurückgibt, und der Fehler verschwindet, ohne dass Sie Ihr JSON anfassen.
Der Statuscode ist 200 - warum ist es dann HTML?
Ein Entwicklungsserver, der bei unbekannten Routen auf index.html zurückfällt, liefert 200 mit einem HTML-Körper. Prüfen Sie neben dem Status auch den Content-Type-Header.

Jetzt beheben

Fügen Sie das Payload in das Werkzeug oben ein, oder gehen Sie direkt zu dem, das für diesen Zweck gebaut wurde.

Ein Payload prüfen