So beheben Sie SyntaxError: Unexpected token < in JSON an Position 0

Der Fehler SyntaxError: „Unexpected token < in JSON at position 0“ zeigt an, dass der JavaScript-Code Nicht-JSON-Daten empfangen hat – in der Regel HTML statt der erwarteten JSON. Um dieses Problem zu beheben, untersuchen Sie zur Bestimmung des Problems die empfangenen Daten. Wenn Sie „fetch()“ oder „JSON.parse()“ verwenden, erfassen Sie die Daten in der Konsole und prüfen Sie auf bekannte Probleme, z. B. falsche URLs, Serverfehler oder Probleme mit variablen Zuweisungen und der Zeichenverschlüsselung.

Dieser Leitfaden hilft Ihnen bei der Behebung von SyntaxError: Unexpected token < in JSON an Position 0. Der Leitfaden gilt auch für folgende andere häufige Varianten desselben Fehlers:

Übersicht

Diese Fehler weisen darauf hin, dass Ihr JavaScript-Code den Erhalt von JSON-Daten erwartete, aber etwas anderes erhalten hat (wahrscheinlich HTML in Form eines serverseitigen Fehlers). Um den Fehler zu beheben, müssen Sie untersuchen, was Sie anstatt der erwarteten JSON-Daten erhalten haben und so das Problem identifizieren.

Details

Dieser Fehler tritt gewöhnlich auf, wenn Ihr Server HTML (was gewöhnlich mit <DOCTYPE html> oder <html> beginnt) statt JSON ausgibt. Gültiger JSON-Code darf nicht mit einem <-Zeichen beginnen, damit der JSON-Parser sofort weiß, dass die Daten keine gültigen JSON-Daten sind und eine der oben erwähnten Fehlermeldungen ausgibt.

Um diesen Fehler zu beheben, müssen Sie herausfinden, warum HTML (oder etwas anderes) statt dem erwarteten JSON ausgegeben wird. Dazu müssen Sie die Daten protokollieren, die Sie in die Konsole parsen möchten.

Wenn Sie fetch() nutzen

Wählen Sie den folgenden Ansatz, wenn Ihr Code etwa so aussieht:

fetch('https://example.com/some/path/to/json')
.then(function (response) {
    return response.json();
})
.then(function (data) {
    // Do something with data
});

In diesem Fall tritt der Fehler auf, wenn response.json() ausgeführt werden soll und beim Parsen der Daten vom Server als JSON versagt. Sie können eine Funktion zur Fehlerbehandlung hinzufügen und den Rohtext des Reaktions-Textkörpers vom Server anzeigen und in die Konsole protokollieren lassen (im Folgenden finden Sie Hinweise zu kommentierten Zeilen):

var responseClone; // 1
fetch('https://example.com/some/path/to/json')
.then(function (response) {
    responseClone = response.clone(); // 2
    return response.json();
})
.then(function (data) {
    // Do something with data
}, function (rejectionReason) { // 3
    console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4
    responseClone.text() // 5
    .then(function (bodyText) {
        console.log('Received the following instead of valid JSON:', bodyText); // 6
    });
});

Hier eine Erklärung zu jeder Zeile mit nummeriertem Kommentar:

  1. Eine responseClone-Variable ist nötig, um einen Klon des response-Objekts zu speichern, da der Textkörper einer response nur einmal gelesen werden kann. Wenn response.json() aufgerufen wird, wird der Textkörper der ursprünglichen response ausgelesen. Das heißt, diese kann nicht erneut gelesen werden, wenn der JSON-Parse-Fehler behandelt werden muss. Durch das Klonen der response in responseClone erhalten Sie zwei Kopien des Response-Textkörpers, mit denen Sie arbeiten können; einmal die ursprüngliche response zur Verwendung mit response.json() und eine weitere zur Verwendung mit responseClone.text(), wenn response.json() fehlschlägt.
  2. Diese Zeile befüllt die responseClone-Variable mit einem Klon der vom Server erhaltenen Antwort.
  3. Ein zweites Funktionsargument wird an die then()-Funktion weitergegeben, die den response.json()-Aufruf befolgt. Diese zweite Funktion wird aufgerufen, wenn das Versprechen von response.json() abgewiesen wird (d. h. ein JSON-Fehler auftritt).
  4. Diese Zeile protokolliert den rejectionReason aus dem abgewiesenen response.json()-Versprechen und den responseClone, sodass sie bei Bedarf untersucht werden kann (der HTTP-Statuscode ist beispielsweise häufig für das Debugging von Nutzen).
  5. Anstatt zu versuchen, den Response-Textkörper vom Server als JSON zu parsen, wird dieser als Rohtext verarbeitet.
  6. Der Textkörper wird zur Untersuchung in die Konsole protokolliert.

Wenn Sie JSON.parse() nutzen

Nutzen Sie diese Methode, wenn der den Fehler verursachende Code folgendermaßen aussieht:

JSON.parse(data);

In diesem Fall können Sie die Daten in die Konsole protokollieren, wenn ein Fehler auftritt, um den Inhalt zu sehen:

try {
    JSON.parse(data);
}
catch (error) {
    console.log('Error parsing JSON:', error, data);
}

Was kann ich anschließend tun?

Sobald Sie die Daten gefunden haben, die den JSON-Parse-Fehler verursachen, erhalten Sie hoffentlich einen Hinweis darauf, warum Sie entgegen der Erwartung keine gültigen JSON-Daten erhalten. Die häufigsten Fehler, die zu diesem Fehler führen sind Folgende: