Résolution de l'erreur « SyntaxError : token inattendu < dans JSON, position 0 ».

L'erreur SyntaxError: Unexpected token < (erreur de syntaxe : jeton inattendu) à la position 0 dans le code JSON indique que votre code JavaScript a obtenu des données non JSON, généralement du code HTML, au lieu du code JSON attendu. Pour identifier et résoudre le problème, vous devez examiner ce que vous avez obtenu au lieu du contenu JSON attendu. Si vous utilisez fetch() ou JSON.parse(), enregistrez les données que vous souhaitez analyser dans la console et vérifiez les problèmes les plus fréquents, comme les URL incorrectes, les erreurs serveur ou encore les problèmes d'affectation de variables et d'encodage de caractères.

Ce guide vous aidera à corriger l'erreur SyntaxError: Unexpected token < (erreur de syntaxe : jeton inattendu) à la position 0 dans le code JSON. Ce guide s'applique également à ces autres variantes courantes de la même erreur :

Récapitulatif

Ces erreurs indiquent que votre code JavaScript devrait recevoir du contenu JSON, mais a obtenu autre chose à la place (probablement du contenu HTML sous la forme d'une erreur côté serveur). Pour résoudre le problème, vous devez examiner ce que vous avez obtenu au lieu du contenu JSON attendu pour déterminer quel est le problème.

Détails

Cette erreur se produit généralement lorsque votre serveur renvoie du code HTML (qui commence généralement par <DOCTYPE html> ou par <html>) au lieu de code JSON. Un code JSON valide ne peut pas commencer par un caractère <, de sorte que l'analyseur JSON détecte immédiatement que les données ne sont pas du code JSON valide et génère l'un des messages d'erreur présentés ci-dessus.

Pour corriger cette erreur, vous devez comprendre pourquoi vous obtenez du code HTML (ou autre) au lieu du contenu JSON que vous attendiez. Pour ce faire, vous devez enregistrer les données que vous essayez d'analyser dans la console.

Si vous utilisez fetch()

Procédez comme suit si votre code ressemble à ceci :

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

Dans ce cas, l'erreur est générée lorsque response.json() tente de s'exécuter et ne parvient pas à analyser les données du serveur en tant que code JSON. Vous pouvez ajouter une fonction pour gérer l'erreur et afficher le texte brut du corps de la réponse du serveur et le consigner dans la console (voir les notes sur les lignes commentées ci-dessous) :

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
    });
});

Voici une explication de chaque ligne avec un commentaire numéroté :

  1. Une variable responseClone est nécessaire pour contenir un clone de l'objet response, car le corps d'un objet response ne peut être lu qu'une seule fois. Lorsque response.json() est appelé, le corps de l'objet response d'origine est lu, ce qui signifie qu'il ne peut pas être relu lors du traitement de l'erreur d'analyse JSON. Le clonage de l'objet response en responseClone génère deux copies du corps de la réponse avec lesquelles travailler : l'un dans l'objet response d'origine à utiliser avec response.json() et l'autre à utiliser avec responseClone.text() si response.json() échoue.
  2. Cette ligne remplit la variable responseClone avec un clone de la réponse reçue du serveur.
  3. Un deuxième argument de fonction est transmis à la fonction then() qui suit l'appel response.json(). Cette deuxième fonction sera appelée si la promesse de response.json() est rejetée (c'est-à-dire qu'une erreur JSON est rencontrée).
  4. Cette ligne enregistre l'objet rejectionReason de la promesse response.json() rejetée et l'objet responseClone pour qu'il puisse être examiné si nécessaire (le code d'état HTTP est souvent utile pour le débogage, par exemple).
  5. Au lieu d'essayer d'analyser le corps de la réponse du serveur en tant que code JSON, il est traité comme du texte brut.
  6. Le corps du texte est enregistré dans la console pour examen.

Si vous utilisez JSON.parse()

Utilisez cette méthode si le code qui renvoie l'erreur ressemble à ce qui suit :

JSON.parse(data);

Dans ce cas, vous pouvez enregistrer les données dans la console si vous rencontrez une erreur pour voir ce qu'elles contiennent :

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

Que dois-je faire ensuite ?

Une fois que vous pouvez consulter les données à l'origine de l'erreur d'analyse JSON, vous disposerez alors peut-être d'un indice sur la raison pour laquelle vous n'obtenez pas le code JSON valide que vous attendez. Voici quelques exemples des problèmes les plus courants qui conduisent à cette erreur :