"SyntaxError: jeton inattendu <dans JSON à la position 0"

Dans un composant d'application React qui gère les flux de contenu de type Facebook, je rencontre une erreur:

Feed.js: 94 "parsererror" non défini "SyntaxError: jeton inattendu <dans JSON à la position 0

J'ai rencontré une erreur similaire qui s'est avérée être une faute de frappe dans le HTML dans la fonction de rendu, mais cela ne semble pas être le cas ici.

Plus déroutant, j'ai restauré le code dans une version antérieure connue et je reçois toujours l'erreur.

Feed.js:

import React from 'react';

var ThreadForm = React.createClass({
  getInitialState: function () {
    return {author: '', 
            text: '', 
            included: '',
            victim: ''
            }
  },
  handleAuthorChange: function (e) {
    this.setState({author: e.target.value})
  },
  handleTextChange: function (e) {
    this.setState({text: e.target.value})
  },
  handleIncludedChange: function (e) {
    this.setState({included: e.target.value})
  },
  handleVictimChange: function (e) {
    this.setState({victim: e.target.value})
  },
  handleSubmit: function (e) {
    e.preventDefault()
    var author = this.state.author.trim()
    var text = this.state.text.trim()
    var included = this.state.included.trim()
    var victim = this.state.victim.trim()
    if (!text || !author || !included || !victim) {
      return
    }
    this.props.onThreadSubmit({author: author, 
                                text: text, 
                                included: included,
                                victim: victim
                              })
    this.setState({author: '', 
                  text: '', 
                  included: '',
                  victim: ''
                  })
  },
  render: function () {
    return (
    <form className="threadForm" onSubmit={this.handleSubmit}>
      <input
        type="text"
        placeholder="Your name"
        value={this.state.author}
        onChange={this.handleAuthorChange} />
      <input
        type="text"
        placeholder="Say something..."
        value={this.state.text}
        onChange={this.handleTextChange} />
      <input
        type="text"
        placeholder="Name your victim"
        value={this.state.victim}
        onChange={this.handleVictimChange} />
      <input
        type="text"
        placeholder="Who can see?"
        value={this.state.included}
        onChange={this.handleIncludedChange} />
      <input type="submit" value="Post" />
    </form>
    )
  }
})

var ThreadsBox = React.createClass({
  loadThreadsFromServer: function () {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function (data) {
        this.setState({data: data})
      }.bind(this),
      error: function (xhr, status, err) {
        console.error(this.props.url, status, err.toString())
      }.bind(this)
    })
  },
  handleThreadSubmit: function (thread) {
    var threads = this.state.data
    var newThreads = threads.concat([thread])
    this.setState({data: newThreads})
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',
      data: thread,
      success: function (data) {
        this.setState({data: data})
      }.bind(this),
      error: function (xhr, status, err) {
        this.setState({data: threads})
        console.error(this.props.url, status, err.toString())
      }.bind(this)
    })
  },
  getInitialState: function () {
    return {data: []}
  },
  componentDidMount: function () {
    this.loadThreadsFromServer()
    setInterval(this.loadThreadsFromServer, this.props.pollInterval)
  },
  render: function () {
    return (
    <div className="threadsBox">
      <h1>Feed</h1>
      <div>
        <ThreadForm onThreadSubmit={this.handleThreadSubmit} />
      </div>
    </div>
    )
  }
})

module.exports = ThreadsBox

Dans les outils de développement Chrome, l'erreur semble provenir de cette fonction:

 loadThreadsFromServer: function loadThreadsFromServer() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function (data) {
        this.setState({ data: data });
      }.bind(this),
      error: function (xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },

avec la ligne console.error(this.props.url, status, err.toString()soulignée.

Puisqu'il semble que l'erreur semble avoir quelque chose à voir avec l'extraction des données JSON du serveur, j'ai essayé de démarrer à partir d'une base de données vide, mais l'erreur persiste. L'erreur semble être appelée dans une boucle infinie, probablement parce que React essaie continuellement de se connecter au serveur et finit par planter le navigateur.

ÉDITER:

J'ai vérifié la réponse du serveur avec les outils de développement Chrome et le client Chrome REST, et les données semblent être JSON correctes.

EDIT 2:

Il semble que bien que le point de terminaison de l'API voulu renvoie effectivement les données et le format JSON corrects, React interroge http://localhost:3000/?_=1463499798727au lieu de ce qui est attendu http://localhost:3001/api/threads.

J'exécute un serveur de rechargement à chaud Webpack sur le port 3000 avec l'application express exécutée sur le port 3001 pour renvoyer les données backend. Ce qui est frustrant ici, c'est que cela fonctionnait correctement la dernière fois que j'ai travaillé dessus et que je ne trouve pas ce que j'aurais pu changer pour le casser.

Le libellé du message d'erreur correspond à ce que vous obtenez de Google Chrome lorsque vous exécutez JSON.parse('<...'). Je sais que vous avez dit que le serveur est en cours de configuration Content-Type:application/json, mais je suis amené à croire que le corps de la réponse est en fait HTML.

Feed.js:94 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0"

avec la ligne console.error(this.props.url, status, err.toString())soulignée.

Le a errété jeté à l'intérieur jQueryet vous a été transmis sous forme de variable err. La raison pour laquelle cette ligne est soulignée est simplement parce que c'est là que vous la connectez.

Je vous suggère d'ajouter à votre journalisation. En regardant les xhrpropriétés réelles (XMLHttpRequest) pour en savoir plus sur la réponse. Essayez d'ajouter console.warn(xhr.responseText)et vous verrez très probablement le code HTML qui est reçu.

Vous recevez du HTML (ou XML) du serveur, mais le dataType: jsondit à jQuery d'analyser en JSON. Vérifiez l'onglet "Réseau" dans les outils de développement Chrome pour voir le contenu de la réponse du serveur.

Cela a fini par être un problème d'autorisations pour moi. J'essayais d'accéder à une URL pour laquelle je n'avais pas d'autorisation avec Cancan, alors l'URL a été commutée users/sign_in. l'url redirigée répond à html, pas json. Le premier caractère d'une réponse html est <.

J'ai rencontré cette erreur «SyntaxError: jeton inattendu m dans JSON à la position», où le jeton «m» peut être tout autre caractère.

Il s'est avéré que j'ai manqué l'une des guillemets doubles dans l'objet JSON lorsque j'utilisais RESTconsole pour le test DB, comme {"name:" math "}, la bonne devrait être {" name ":" math "}

Il m'a fallu beaucoup d'efforts pour comprendre cette erreur maladroite. Je crains que d'autres ne se heurtent à des déceptions similaires.

Dans mon cas, j'obtenais ce webpack en cours d'exécution, et il s'est avéré qu'il y avait une corruption quelque part dans le répertoire node_modules local.

rm -rf node_modules
npm install

... était suffisant pour le faire fonctionner à nouveau correctement.

Dans mon cas, l'erreur est due au fait que je n'ai pas affecté ma valeur de retour à une variable. Ce qui suit a provoqué le message d'erreur:

return new JavaScriptSerializer().Serialize("hello");

Je l'ai changé en:

string H = "hello";
return new JavaScriptSerializer().Serialize(H);

Sans la variable JSON n'est pas en mesure de formater correctement les données.

Cette erreur se produit lorsque vous définissez la réponse en tant que application/jsonet que vous obtenez un code HTML en tant que réponse. Fondamentalement, cela s'est produit lorsque vous écrivez un script côté serveur pour une URL spécifique avec une réponse JSON mais que le format d'erreur est en HTML.

Assurez-vous que la réponse est au format JSON, sinon cette erreur se déclenche.

je faisais face au même problème que
j'ai supprimé le dataType: 'json' de la méthode $ .ajax

J'ai eu le même message d'erreur après un tutoriel. Notre problème semble être «url: this.props.url» dans l'appel ajax. Dans React.DOM lorsque vous créez votre élément, le mien ressemble à ceci.

ReactDOM.render(
    <CommentBox data="/api/comments" pollInterval={2000}/>,
    document.getElementById('content')
);

Eh bien, ce CommentBox n'a pas d'URL dans ses accessoires, juste des données. Quand j'ai changé url: this.props.url-> url: this.props.data, il a fait le bon appel au serveur et j'ai récupéré les données attendues.

J'espère que ça aide.

Mon problème était que je récupérais les données dans un stringformat qui n'était pas au format JSON approprié, que j'essayais ensuite d'analyser. simple example: JSON.parse('{hello there}')donnera une erreur à h. Dans mon cas, l'URL de rappel renvoyait un caractère inutile avant les objets: employee_names([{"name":....et obtenait une erreur à e à 0. Mon URL de rappel elle-même avait un problème qui, une fois corrigé, ne renvoyait que des objets.

Dans mon cas, pour un site Angular 2/4 hébergé par Azure, mon appel d'API vers mySite / api / ... était en train de rediriger en raison de problèmes de routage mySite. Donc, il renvoyait le HTML de la page redirigée au lieu de l'API JSON. J'ai ajouté une exclusion dans un fichier web.config pour le chemin api.

Je n'obtenais pas cette erreur lors du développement local car le site et l'API étaient sur des ports différents. Il y a probablement une meilleure façon de le faire ... mais cela a fonctionné.

<?xml version="1.0" encoding="UTF-8"?>

<configuration>
    <system.webServer>
        <rewrite>
        <rules>
        <clear />

        <!-- ignore static files -->
        <rule name="AngularJS Conditions" stopProcessing="true">
        <match url="(app/.*|css/.*|fonts/.*|assets/.*|images/.*|js/.*|api/.*)" />
        <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
        <action type="None" />
        </rule>

        <!--remaining all other url's point to index.html file -->
        <rule name="AngularJS Wildcard" enabled="true">
        <match url="(.*)" />
        <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
        <action type="Rewrite" url="index.html" />
        </rule>

        </rules>
        </rewrite>
    </system.webServer>
</configuration>

Cela pourrait être vieux. Mais, cela vient de se produire en angulaire, le type de contenu pour la demande et la réponse était différent dans mon code. Donc, vérifiez les en-têtes pour,

 let headers = new Headers({
        'Content-Type': 'application/json',
        **Accept**: 'application/json'
    });

dans React axios

axios({
  method:'get',
  url:'http://  ',
 headers: {
         'Content-Type': 'application/json',
        Accept: 'application/json'
    },
  responseType:'json'
})

jQuery Ajax:

 $.ajax({
      url: this.props.url,
      dataType: 'json',
**headers: { 
          'Content-Type': 'application/json',
        Accept: 'application/json'
    },**
      cache: false,
      success: function (data) {
        this.setState({ data: data });
      }.bind(this),
      error: function (xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },

Après avoir passé beaucoup de temps avec cela, j'ai découvert que dans mon cas, le problème était d'avoir une "page d'accueil" définie sur mon fichier package.json qui faisait que mon application ne fonctionnait pas sur firebase (même erreur "token"). J'ai créé mon application React à l'aide de create-react-app, puis j'ai utilisé le guide Firebase du fichier READ.me pour déployer sur les pages Github, j'ai réalisé que je devais faire un travail supplémentaire pour que le routeur fonctionne et je suis passé à Firebase. github guide avait ajouté la clé de la page d'accueil sur package.json et provoqué le problème de déploiement.

Protip: tester json sur un serveur Node.js local? Assurez-vous que vous n'avez pas déjà quelque chose de routage vers ce chemin

'/:url(app|assets|stuff|etc)';

D'une manière générale, cette erreur se produit lorsqu'un objet JSON est analysé et contient des erreurs de syntaxe. Pensez à quelque chose comme ça, où la propriété message contient des guillemets doubles non échappés:

{
    "data": [{
        "code": "1",
        "message": "This message has "unescaped" quotes, which is a JSON syntax error."
    }]
}

Si vous avez JSON quelque part dans votre application, il est bon de l'exécuter via JSONLint pour vérifier qu'il n'a pas d'erreur de syntaxe. Habituellement, ce n'est pas le cas, mais d'après mon expérience, c'est généralement le JSON renvoyé d'une API qui est le coupable.

Lorsqu'une demande XHR est faite à une API HTTP qui renvoie une réponse avec un en- Content-Type:application/json; charset=UTF-8tête qui contient du JSON non valide dans le corps de la réponse, vous verrez cette erreur.

Si un contrôleur d'API côté serveur ne gère pas correctement une erreur de syntaxe et qu'il est imprimé dans le cadre de la réponse, cela rompra la structure du JSON renvoyé. Un bon exemple de ceci serait une réponse API contenant un avertissement ou un avis PHP dans le corps de la réponse:

<b>Notice</b>:  Undefined variable: something in <b>/path/to/some-api-controller.php</b> on line <b>99</b><br />
{
    "success": false,
    "data": [{ ... }]
}

95% du temps, c'est la source du problème pour moi, et bien qu'il soit quelque peu abordé ici dans les autres réponses, je ne pensais pas qu'il était clairement décrit. J'espère que cela aide, si vous cherchez un moyen pratique de localiser la réponse API qui contient une erreur de syntaxe JSON, j'ai écrit un module angulaire pour cela .

Voici le module:

/**
 * Track Incomplete XHR Requests
 * 
 * Extend httpInterceptor to track XHR completions and keep a queue 
 * of our HTTP requests in order to find if any are incomplete or 
 * never finish, usually this is the source  of the issue if it's 
 * XHR related
 */
angular.module( "xhrErrorTracking", [
        'ng',
        'ngResource'
    ] )
    .factory( 'xhrErrorTracking', [ '$q', function( $q ) {
        var currentResponse = false;

        return {
            response: function( response ) {
                currentResponse = response;
                return response || $q.when( response );
            },
            responseError: function( rejection ) {
                var requestDesc = currentResponse.config.method + ' ' + currentResponse.config.url;
                if ( currentResponse.config.params ) requestDesc += ' ' + JSON.stringify( currentResponse.config.params );

                console.warn( 'JSON Errors Found in XHR Response: ' + requestDesc, currentResponse );

                return $q.reject( rejection );
            }
        };
    } ] )
    .config( [ '$httpProvider', function( $httpProvider ) {
        $httpProvider.interceptors.push( 'xhrErrorTracking' );
    } ] );

Plus de détails peuvent être trouvés dans l'article de blog référencé ci-dessus, je n'ai pas posté tout ce qui s'y trouve ici car ce n'est probablement pas tout à fait pertinent.

Pour moi, cela s'est produit lorsqu'une des propriétés de l'objet que je retournais alors que JSON a levé une exception.

public Dictionary<string, int> Clients { get; set; }
public int CRCount
{
    get
    {
        var count = 0;
        //throws when Clients is null
        foreach (var c in Clients) {
            count += c.Value;
        }
        return count;
    }
}

Ajout d'un chèque nul, corrigé pour moi:

public Dictionary<string, int> Clients { get; set; }
public int CRCount
{
    get
    {
        var count = 0;
        if (Clients != null) {
            foreach (var c in Clients) {
                count += c.Value;
            }
        }
        return count;
    }
}

juste quelque chose de simple à vérifier, assurez-vous que vous n'avez rien mis en commentaire dans le fichier json

//comments here will not be parsed and throw error

Juste pour ajouter aux réponses, cela se produit également lorsque votre réponse API comprend

<?php{username: 'Some'}

ce qui pourrait être le cas lorsque votre backend utilise PHP.

En python, vous pouvez utiliser json.Dump (str) avant d'envoyer le résultat au modèle html. avec cette chaîne de commande, convertissez au format json correct et envoyez au modèle html. Après avoir envoyé ce résultat à JSON.parse (résultat), c'est une réponse correcte et vous pouvez l'utiliser.

Pour certains, cela peut vous aider: j'ai eu une expérience similaire avec Wordpress REST API. J'ai même utilisé Postman pour vérifier si j'avais les bons itinéraires ou points de terminaison. J'ai découvert plus tard que j'avais accidentellement mis un "écho" dans mon script - hooks:

Déboguer et vérifier votre console

Cause de l'erreur

Donc, fondamentalement, cela signifie que j'ai imprimé une valeur qui n'est pas JSON qui est mélangée avec le script qui provoque l'erreur AJAX - "SyntaxError: jeton inattendu r dans JSON à la position 0"

Cela peut être dû au fait que votre code javascript examine une réponse json et que vous avez reçu autre chose comme du texte.

J'avais le même problème. J'utilise un simple serveur node.js pour envoyer une réponse à un client fait dans Angular 7. Au départ, j'envoyais response.end ('Bonjour tout le monde depuis le serveur nodejs'); au client, mais en quelque sorte angulaire n'a pas pu l'analyser.

Ceux qui utilisent create-react-appet essaient de récupérer des fichiers json locaux.

Comme dans create-react-app, webpack-dev-serverest utilisé pour gérer la demande et pour chaque demande, il sert le index.html. Vous obtenez donc

SyntaxError: jeton inattendu <dans JSON à la position 0.

Pour résoudre ce problème, vous devez éjecter l'application et modifier le webpack-dev-server fichier de configuration.

Vous pouvez suivre les étapes à partir d' ici .

Dans mon cas (backend), j'utilisais res.send (token);

Tout a été corrigé lorsque j'ai changé pour res.send (data);

Vous voudrez peut-être vérifier si tout fonctionne et publier comme prévu, mais l'erreur continue d'apparaître dans votre frontal.

Les possibilités de cette erreur sont écrasantes.

Dans mon cas, je trouve que la question a été l'ajout homepagedéposéepackage.json cause.

A vérifier: en cours de package.jsonmodification:

homepage: "www.example.com"

à

hompage: ""   

En un mot, si vous obtenez cette erreur ou une erreur similaire, cela ne signifie qu'une chose. Autrement dit, quelque part dans notre base de code, nous nous attendions à ce qu'un format JSON valide soit traité et nous ne l'avons pas obtenu. Par exemple:

var string = "some string";
JSON.parse(string)

Va lancer une erreur en disant

SyntaxError non capturée: jetons inattendus dans JSON à la position 0

Parce que, le premier caractère stringest set ce n'est pas JSON valide maintenant. Cela peut également générer des erreurs entre les deux. comme:

var invalidJSON= '{"foo" : "bar", "missedquotehere : "value" }';
JSON.parse(invalidJSON)

Va lancer une erreur:

VM598:1 Uncaught SyntaxError: Unexpected token v in JSON at position 36

parce que nous avons intentionnellement manqué une citation dans la chaîne JSON invalidJSON à la position 36.

Et si vous corrigez cela:

var validJSON= '{"foo" : "bar", "missedquotehere : "value" }';
JSON.parse(validJSON)

vous donnera un objet en JSON.

Maintenant, cette erreur peut être lancée n'importe où et dans n'importe quel framework / bibliothèque. La plupart du temps, vous lisez peut-être une réponse réseau qui n'est pas un JSON valide. Les étapes de débogage de ce problème peuvent donc être les suivantes:

1. curl ou cliquez sur l'API réelle que vous appelez.
2. Enregistrez / copiez la réponse et essayez de l'analyser avec JSON.parse. Si vous obtenez une erreur, corrigez-la.
3. Sinon, assurez-vous que votre code ne mute pas / ne modifie pas la réponse d'origine.

Si quelqu'un d'autre utilise fetch à partir de la documentation "Using Fetch" sur les API Web dans Mozilla: (Ceci est vraiment utile: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch )

  fetch(api_url + '/database', {
    method: 'POST', // or 'PUT'
    headers: {
     'Content-Type': 'application/json'
    },
    body: qrdata //notice that it is not qr but qrdata
  })
  .then((response) => response.json())
  .then((data) => {
    console.log('Success:', data);
  })  
  .catch((error) => {
  console.error('Error:', error);  });

C'était à l'intérieur de la fonction:

async function postQRData(qr) {

  let qrdata = qr; //this was added to fix it!
  //then fetch was here
}

Je passais dans ma fonction qrce que je croyais être un objet car qrressemblait à ceci: {"name": "Jade", "lname": "Bet", "pet":"cat"}mais je continuais à recevoir des erreurs de syntaxe. Quand je l'ai assigné à autre chose: let qrdata = qr;ça a marché.

Jeton inattendu <dans JSON à la position 0

Une solution simple à cette erreur consiste à écrire un commentaire dans un styles.lessfichier.