Hoe SyntaxError te repareren: Unexpected token < in JSON at position 0

De SyntaxError: De foutmelding Onverwachte token < in JSON bij positie 0 geeft aan dat JavaScript-code niet-JSON-gegevens heeft ontvangen (meestal HTML in plaats van de verwachte JSON). Om het probleem op te lossen, moet je de ontvangen gegevens onderzoeken om het probleem vast te stellen. Als je fetch() of JSON.parse() gebruikt, registreert de gegevens dan naar de console en controleer op veelvoorkomende problemen, zoals onjuiste URL's, serverfouten of problemen met variabele toewijzing en tekencodering.

Deze handleiding helpt bij het oplossen van SyntaxError: Onverwachte token < in JSON bij positie 0. Deze gids kun je ook gebruiken bij andere veelvoorkomende varianten van deze fout:

Overzicht

Deze fouten geven aan dat je JavaScript-code verwacht JSON te ontvangen, maar in plaats daarvan iets anders heeft gekregen (waarschijnlijk HTML in de vorm van een serverfout). Om het probleem op te lossen, moet je onderzoeken wat je hebt gekregen in plaats van de verwachte JSON, om te bepalen wat het probleem is.

Details

Meestal wordt deze fout veroorzaakt wanneer je server HTML retourneert (wat meestal begint met <DOCTYPE html> of <html>) in plaats van JSON. Geldige JSON kan niet beginnen met een <-teken, dus de JSON-parser weet onmiddellijk dat de gegevens geen geldige JSON zijn en produceert een van de hierboven genoemde foutmeldingen.

Om deze fout op te lossen, moet je erachter komen waarom je HTML (of iets anders) krijgt, in plaats van de JSON die je verwachtte. Hiervoor moet je de gegevens die je probeert te parseren naar de console loggen.

Als je fetch() gebruikt

Volg deze aanpak als je code er ongeveer zo uitziet:

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

In dit geval wordt de fout gegenereerd wanneer response.json() probeert te worden uitgevoerd en de gegevens van de server niet als JSON kunnen worden geparseerd. Je kunt een functie toevoegen om de fout af te handelen en de onbewerkte antwoordtekst van de server weer te geven, zodat je deze in de console kunt registreren (zie opmerkingen over commentaarregels hieronder):

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 is de uitleg voor elke regel, met een genummerde opmerking:

  1. De variabele responseClone is vereist om een kloon van het object respons te krijgen, omdat de hoofdtekst van een respons slechts één keer kan worden gelezen. Wanneer response.json() wordt aangeroepen, wordt de hoofdtekst van de oorspronkelijke respons gelezen, wat betekent dat het niet opnieuw kan worden gelezen bij het verwerken van de JSON-parseerfout. Het klonen van de respons naar responsClone levert twee kopieën van de responstekst op om mee te werken; een in de oorspronkelijke respons om te gebruiken met response.json() en een andere om te gebruiken met responseClone.text() als response.json() mislukt.
  2. Deze regel vult de variabele responseClone met een kloon van de respons die van de server is ontvangen.
  3. Een tweede functieargument wordt doorgegeven aan de functie then() die volgt op de aanroep response.json(). Deze tweede functie wordt aangeroepen als de belofte van response.json() wordt afgewezen (d.w.z. er wordt een JSON-fout aangetroffen).
  4. Deze regel registreert de rejectionReason van de afgewezen response.json()-belofte en de responseClone, zodat deze indien nodig kan worden onderzocht (de HTTP-statuscode is bijvoorbeeld vaak handig voor foutopsporing).
  5. In plaats van te proberen de antwoordtekst van de server te parseren als JSON, wordt deze verwerkt als onbewerkte tekst.
  6. De hoofdtekst wordt voor onderzoek op de console geregistreerd.

Als je JSON.parse() gebruikt

Gebruik deze methode als de code die de fout genereert er als volgt uitziet:

JSON.parse(data);

In dit geval kun je de gegevens in de console registreren als er een fout optreedt, om te zien wat deze bevat:

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

Wat moet ik nu doen?

Vanaf het moment dat je de gegevens kunt zien die de JSON-parse-fout veroorzaken, geeft dit hopelijk een aanwijzing waarom je niet de geldige JSON krijgt die je verwacht. Enkele van de meest voorkomende problemen voor het ontstaan van deze fout zijn: