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

L'erreur SyntaxError: Unexpected token < in JSON at position 0 indique que le code JavaScript a reçu des données non JSON, généralement HTML, au lieu des données JSON attendues. Pour résoudre le problème, il convient d'examiner les données reçues afin d'en déterminer l'origine. Si vous utilisez fetch() ou JSON.parse(), enregistrez les données dans la console et vérifiez les problèmes courants tels que les URL incorrectes, les erreurs de serveur ou les problèmes d'affectation de variables et d'encodage de caractères.

Ce guide aide à régler SyntaxError: Unexpected token < in JSON at position 0. Ce guide s'applique également à ces autres variations courantes de la même erreur :

Récapitulatif

Ces erreurs indiquent que votre code JavaScript s'attendait à recevoir du contenu JSON, mais a reçu autre chose (probablement du HTML provenant d'une erreur coté serveur). Pour régler le problème, vous devez examiner ce que vous avez obtenu au lieu du contenu JSON attendu, afin de déterminer la nature du problème.

Détails

En général, cette erreur survient quand votre serveur retourne du code HTML (qui commence habituellement par <DOCTYPE html> ou <html>) au lieu de JSON. Le contenu JSON valide ne peut pas commencer par un caractère <, donc l'analyseur syntaxique sait immédiatement que les données ne sont pas du contenu JSON valide et produit un des messages d'erreur mentionnés ci-dessus.

Pour régler cette erreur, vous devez trouver la raison pour laquelle vous recevez du code HTML (ou autre chose) au lieu du contenu JSON attendu. Pour ce faire, vous devez envoyer vers la console les données que vous tentez d'analyser.

Si vous utilisez fetch()

Utilisez cette approche 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 envoyée quand response.json() tente de s'exécuter et qu'il n'arrive pas à analyser les données provenant du serveur en tant que contenu JSON. Vous pouvez ajouter une fonction pour traiter l'erreur et afficher le texte brut du corps de la réponse provenant du serveur et l'envoyer vers la console (voir les notes concernant 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 requise pour maintenir un clone de l'objet response parce que le corps de l'objet response ne peut être lu qu'une seule fois. Lorsque response.json() est appelé, le corps de l'objet response original est lu, ce qui signifie qu'il ne peut pas être lu à nouveau lors du traitement de l'erreur d'analyse JSON. Cloner l'objet response vers responseClone fournit deux copies du corps de la réponse : une dans l'objet response original, à utiliser avec response.json(), et une autre à utiliser avecresponseClone.text() si response.json() échoue.
  2. Cette ligne remplit la variableresponseClone avec un clone de la réponse reçue du serveur.
  3. Un deuxième argument de la fonction est passé à 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 (par ex., une erreur JSON survient).
  4. Cette ligne enregistre le motif rejectionReason de la promesse response.json() rejetée et responseClone afin qu'il puisse être examiné au besoin (le code de statut HTTP est souvent utile pour régler les bogues, par exemple).
  5. Au lieu de tenter d'analyser le corps de la réponse du serveur comme JSON, il est traité comme du texte brut.
  6. Le texte du corps est enregistré vers la console à des fins d'analyse.

Si vous utilisez JSON.parse()

Utilisez cette méthode si le code qui entraîne une erreur ressemble à ce qui suit :

JSON.parse(data);

Dans ce cas, vous pouvez enregistrer les données vers la console si une erreur survient afin de voir ce qu'elle contient :

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

Quelles sont les prochaines étapes?

Maintenant qu'il est possible de voir les données qui causent l'erreur d'analyse JSON, ces dernières pourront fournir un indice sur la raison pour laquelle vous n'obtenez pas le code JSON valide attendu. Voici quelques-uns des problèmes les plus fréquents qui entraînent cette erreur :