"SyntaxError: jeton inattendu <dans JSON à la position 0" dans L'application React

Vous recevez HTML (ou XML) du serveur, mais le dataType: json dit à jQuery d'analyser en tant que JSON. Vérifiez l'onglet "Réseau" dans Chrome dev tools 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, donc l'url a été commutée à users/sign_in. l'url redirigée répond au html, pas au json. Le premier caractère d'une réponse html est <.

J'ai rencontré cette erreur "SyntaxError: token inattendu m dans JSON at position", où le token 'm' peut être n'importe quel autre caractère.

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

Il m'a fallu beaucoup d'efforts pour comprendre cette erreur maladroite. J'ai peur que d'autres se heurtent à des bummers similaires.

Dans mon cas, l'erreur était due au fait que je n'attribuais pas 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 est incapable de formater correctement les données.

Dans mon cas, je recevais ce webpack en cours d'exécution, et il s'est avéré être une corruption quelque part dans le répertoire local node_modules.

rm -rf node_modules
npm install

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

Mon problème était que je récupérais les données dans un string qui n'était pas dans un format JSON approprié, 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 à e à 0. Mon URL de rappel elle-même avait un problème qui, une fois corrigé, ne renvoyait que des objets.

Cette erreur se produit lorsque vous définissez la réponse comme application/json et 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 de JSON mais le format d'erreur est en HTML.

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

Je ne recevais 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 il a travaillé.

<?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 s'est juste produit dans angular, le type de contenu pour la requête et la réponse étaient différents 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)
    });
  },

J'ai eu le même message d'erreur suite à un tutoriel. Notre problème semble être 'url: cette.accessoires de jeu.url " dans l'appel ajax. À Réagir.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 zone de commentaires 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.

Après avoir passé beaucoup de temps avec eux, j'ai découvert que dans mon cas, le problème était d'avoir "page d'accueil", défini sur mon paquet.le fichier json a fait que mon application ne fonctionne pas sur firebase(même erreur' token'). J'ai créé mon application react en utilisant create-react-app, puis j'ai utilisé le guide firebase sur le READ.me fichier à déployer sur les pages github, réalisé que je devais faire un travail supplémentaire pour que le routeur fonctionne, et commuté à firebase. guide github avait ajouté la clé de la page d'accueil sur le paquet.json et causé le problème de déploiement.

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

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

Au niveau général, cette erreur se produit lorsqu'un objet JSON est analysé qui contient des erreurs de syntaxe. Pensez à quelque chose comme ceci, 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 dans votre application quelque part, 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 dans mon expérience, C'est généralement JSON renvoyé d'une API qui est le coupable.

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

Si un contrôleur D'API côté serveur gère incorrectement une erreur de syntaxe et qu'il est imprimé dans le cadre de la réponse, cela va casser la structure de JSON renvoyée. 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. Espérons que cela aide, si vous cherchez un moyen pratique de trouver quelle réponse 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 tout pertinent.

Pour moi, cela s'est produit lorsque L'une des propriétés de l'objet que je retournais en tant que JSON a lancé 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'une vérification nulle, 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 basique à vérifier, assurez - vous que vous n'avez rien commenté 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 inclut

<?php{username: 'Some'}

Ce qui pourrait être un 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 convertir au format JSON correct et envoyer au modèle html. Après avoir envoyé ce résultat à JSON.parse (result), c'est une réponse correcte et vous pouvez l'utiliser.

Pour certains, cela peut vous aider les gars: 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 routes ou le point de terminaison corrects. J'ai découvert plus tard que j'avais accidentellement mis un "écho" dans mon script-hooks:

Débogage et vérification de 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 une erreur AJAX - " SyntaxError: token inattendu R in JSON à la position 0 "

Jeton inattendu

Une solution simple à cette erreur est d'écrire un commentaire dans le fichier styles.less.