"SyntaxError: Jeton inattendu <dans JSON à la position 0"
Dans un composant de l'application React qui gère les flux de contenu de type Facebook, je rencontre une erreur:
Feed.js: 94 "erreur d'analyse" "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 code HTML de la fonction de rendu, mais cela ne semble pas être le cas ici.
De manière plus confuse, j'ai rétabli le code dans une version antérieure, qui fonctionnait déjà, 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 de 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.
Comme il semble que l'erreur semble avoir quelque chose à voir avec l'extraction de données JSON du serveur, j'ai essayé de démarrer à partir d'une base de données vierge, mais l'erreur persiste. L’erreur semble être appelée dans une boucle infinie, probablement parce que React essaie en permanence de se connecter au serveur et bloque le navigateur.
MODIFIER:
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 du code JSON approprié.
EDIT 2:
Il semble que bien que le point de terminaison de l'API prévu renvoie effectivement les données et le format JSON corrects, React interroge http://localhost:3000/?_=1463499798727 au lieu du http://localhost:3001/api/threads attendu.
J'exécute un serveur Webpack de recharge à chaud sur le port 3000 avec l'application Express s'exécutant sur le port 3001 pour renvoyer les données principales. Ce qui est frustrant ici, c’est que cela fonctionnait correctement la dernière fois que j’y ai travaillé et que je ne trouve pas ce que j’aurais pu changer pour le résoudre.
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 train de configurer Content-Type:application/json, mais je suis amené à croire que la réponse body est en réalité 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.
La err a en fait été jetée dans jQuery et vous a été transmise sous la forme d'une variable err. La raison pour laquelle cette ligne est soulignée est simplement parce que c'est là que vous la connectez.
Je suggérerais que vous ajoutiez à votre journalisation. Examinez les propriétés xhr (XMLHttpRequest) pour en savoir plus sur la réponse. Essayez d'ajouter console.warn(xhr.responseText) et vous verrez probablement le code HTML en cours de réception.
Vous recevez HTML (ou XML) du serveur, mais le dataType: json indique à jQuery d'analyser en tant que JSON. Vérifiez l'onglet "Réseau" dans les outils de développement de 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; elle a donc été remplacée par users/sign_in. l'URL redirigée répond au HTML, pas JSON. Le premier caractère d'une réponse HTML est <.
J'ai rencontré l'erreur "SyntaxError: jeton inattendu m en JSON à la position", où le jeton «m» peut être constitué de tout autre caractère.
Lorsque j’utilisais RESTconsole pour le test de base de données, j’ai oublié l’un des guillemets de l’objet JSON, sous la forme {"name:" math "}, le nom correct doit être {" name ":" math "}
Il m'a fallu beaucoup d'efforts pour comprendre cette maladroite erreur. Je crains que d'autres ne rencontrent des échecs similaires.
Dans mon cas, ce pack Web fonctionnait 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 que cela fonctionne à 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é pour:
string H = "hello";
return new JavaScriptSerializer().Serialize(H);
Sans la variable, JSON ne peut pas formater correctement les données.
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, cette 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, le bon appel au serveur a été renvoyé et j'ai récupéré les données attendues.
J'espère que ça aide.
Assurez-vous que la réponse est au format JSON, sinon cette erreur se produit.
Mon problème était que je récupérais les données dans une string qui n'était pas au format JSON approprié, ce que j'essayais alors de l'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 en e à 0. Mon URL de rappel en elle-même avait un problème qui, une fois résolu, ne renvoyait que des objets.
Dans mon cas, pour un site Angular 2/4 hébergé sur Azure, mon appel d'API à mySite/api/... était redirigé en raison de problèmes de routage mySite. Ainsi, il renvoyait le code HTML à partir de la page redirigée au lieu de l’API JSON. J'ai ajouté une exclusion dans un fichier web.config pour le chemin d'accès à l'API.
Je ne recevais pas cette erreur lors du développement local car le site et l'API se trouvaient sur des ports différents. Il y a probablement une meilleure façon de faire cela ... 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>
Ceux qui utilisent create-react-app et essaient de récupérer des fichiers JSON locaux.
Comme dans create-react-app, webpack-dev-server est utilisé pour traiter la demande et pour chaque demande, il sert le index.html. Donc vous obtenez
SyntaxError: Jeton inattendu <dans JSON à la position 0.
Pour résoudre ce problème, vous devez éjecter l'application et modifier le fichier de configuration webpack-dev-server.
Vous pouvez suivre les étapes à partir de ici .
Cette erreur se produit lorsque vous définissez la réponse en tant que application/json et que vous obtenez un code HTML en tant que réponse. En gros, cela s'est produit lorsque vous écrivez un script côté serveur pour une URL spécifique avec une réponse de JSON, mais le format de l'erreur est au format HTML.
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. Alors, vérifiez les en-têtes pour,
let headers = new Headers({
'Content-Type': 'application/json',
**Accept**: 'application/json'
});
dans Réagir 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)
});
},
Cela pourrait être dû au fait que votre code javascript recherche une réponse json et que vous ayez reçu quelque chose d'autre comme du texte.
Pour moi, cela s'est produit lorsque l'une des propriétés de l'objet que je retournais sous forme de exception JSON.
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;
}
}
L'ajout d'un chèque nul l'a 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;
}
}
De manière générale, cette erreur se produit lors de l'analyse d'un objet JSON comportant des erreurs de syntaxe. Pensez à quelque chose comme ceci, où la propriété de message contient des guillemets non échappés:
{
"data": [{
"code": "1",
"message": "This message has "unescaped" quotes, which is a JSON syntax error."
}]
}
Si vous avez un fichier JSON dans votre application quelque part, il est conseillé de l'exécuter via JSONLint pour vérifier qu'il ne présente pas d'erreur de syntaxe. Généralement, ce n'est pas le cas, mais d'après mon expérience, c'est JSON qui est retourné par une API qui en est la cause.
Lorsqu'une demande XHR est adressée à une API HTTP qui renvoie une réponse avec un en-tête Content-Type:application/json; charset=UTF-8 qui contient un code JSON non valide dans le corps de la réponse, le message d'erreur suivant s'affiche.
Si un contrôleur API côté serveur gère incorrectement une erreur de syntaxe et que celle-ci est imprimée dans le cadre de la réponse, la structure de JSON renvoyée sera rompue. Un bon exemple de ceci serait une réponse de l'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": [{ ... }]
}
C'est la source du problème pour moi dans 95% des cas, et même si cela a été abordé dans les autres réponses, je ne pensais pas que cela avait été clairement décrit. J'espère que cela vous aidera si vous recherchez un moyen pratique de déterminer quelle réponse d'API 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 trouvé ici car ce n'est probablement pas tous pertinents.
Pour certains, cela peut vous aider: J'ai eu une expérience similaire avec l'API Wordpress REST. J'ai même utilisé Postman pour vérifier si j'avais les itinéraires ou les points d'extrémité corrects. J'ai découvert par la suite que j'avais accidentellement ajouté un "écho" dans mon script - hooks:
Déboguer et vérifier votre console
En gros, cela signifie que j’ai imprimé une valeur qui n’est pas JSON et qui est mélangée au script qui provoque l’erreur AJAX - "SyntaxError: jeton inattendu r dans JSON à la position 0".
juste quelque chose de basique à vérifier, assurez-vous de ne rien dire dans le fichier json
//comments here will not be parsed and throw error
J'avais le même problème. J'utilise un simple serveur node.js pour envoyer la réponse à un client créé dans Angular 7. Initialement, j'envoyais response.end ('Hello world from nodejs server'); Au client, mais angular n'a pas pu l'analyser .
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 correctement et que vous postez comme prévu, mais l'erreur continue de s'afficher dans votre frontal.
Après avoir passé beaucoup de temps avec cela, j'ai découvert que dans mon cas le problème était d'avoir "homepage" défini sur mon fichier package.json et que mon application ne fonctionnait pas sur firebase (même erreur 'token') . mon application de réaction à l’aide de create-react-app, puis j’ai utilisé le guide firebase du fichier READ.me pour le déploiement sur des pages github; github guide avait ajouté la clé de page d'accueil sur package.json et était à l'origine du problème de déploiement.
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-la au format JSON correct et envoyez-la au modèle HTML. Après l'envoi de ce résultat à JSON.parse (résultat), la réponse est correcte et vous pouvez l'utiliser.
Pour ajouter aux réponses, cela se produit également lorsque votre réponse à l’API inclut
<?php{username: 'Some'}
ce qui pourrait être le cas lorsque votre serveur utilise PHP.
Protip: Test de JSON sur un serveur Node.js local? Assurez-vous de ne pas déjà avoir quelque chose de routage vers ce chemin
'/:url(app|assets|stuff|etc)';