"SyntaxError: Unerwartetes Token <in JSON an Position 0"

In einer React-App-Komponente, die Facebook-ähnliche Content-Feeds verarbeitet, tritt ein Fehler auf:

Feed.js: 94 undefinierter "Parsererror" "SyntaxError: Unerwartetes Token <in JSON an Position 0

Ich bin auf einen ähnlichen Fehler gestoßen, der sich als Tippfehler im HTML-Code innerhalb der Renderfunktion herausstellte, aber das scheint hier nicht der Fall zu sein.

Verwirrender ist, dass ich den Code auf eine frühere, bekanntermaßen funktionierende Version zurückgesetzt habe und immer noch den Fehler erhalte.

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

In Chrome-Entwicklertools scheint der Fehler von dieser Funktion zu stammen:

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

mit der Linie console.error(this.props.url, status, err.toString()unterstrichen.

Da es so aussieht, als hätte der Fehler etwas mit dem Abrufen von JSON-Daten vom Server zu tun, habe ich versucht, von einer leeren Datenbank aus zu starten, aber der Fehler bleibt bestehen. Der Fehler scheint vermutlich in einer Endlosschleife aufgerufen zu werden, da React ständig versucht, eine Verbindung zum Server herzustellen, und schließlich den Browser zum Absturz bringt.

BEARBEITEN:

Ich habe die Serverantwort mit den Chrome-Entwicklungstools und dem Chrome REST-Client überprüft, und die Daten scheinen korrekt zu sein.

EDIT 2:

Es scheint, dass der beabsichtigte API-Endpunkt tatsächlich die richtigen JSON-Daten und das richtige JSON-Format zurückgibt, React jedoch http://localhost:3000/?_=1463499798727anstelle der erwarteten Abfragen abruft http://localhost:3001/api/threads.

Ich verwende einen Webpack-Hot-Reload-Server auf Port 3000, wobei die Express-App auf Port 3001 ausgeführt wird, um die Backend-Daten zurückzugeben. Was hier frustrierend ist, ist, dass dies das letzte Mal, als ich daran gearbeitet habe, richtig funktioniert hat und ich nicht finden kann, was ich möglicherweise geändert haben könnte, um es zu brechen.

Der Wortlaut der Fehlermeldung entspricht dem, was Sie beim Ausführen von Google Chrome erhalten JSON.parse('<...'). Ich weiß , Sie sagte der Server setzt Content-Type:application/json, aber ich bin führte die Antwort zu glauben , Körper HTML ist eigentlich.

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

mit der Linie console.error(this.props.url, status, err.toString())unterstrichen.

Das errwurde tatsächlich hineingeworfen jQueryund als Variable an Sie übergeben err. Der Grund, warum diese Zeile unterstrichen ist, liegt einfach darin, dass Sie sie dort protokollieren.

Ich würde vorschlagen, dass Sie zu Ihrer Protokollierung hinzufügen. Sehen Sie sich die tatsächlichen xhrEigenschaften (XMLHttpRequest) an, um mehr über die Antwort zu erfahren. Wenn console.warn(xhr.responseText)Sie versuchen, etwas hinzuzufügen , wird höchstwahrscheinlich der empfangene HTML-Code angezeigt.

Sie erhalten HTML (oder XML) vom Server zurück, aber das dataType: jsonweist jQuery an, als JSON zu analysieren. Überprüfen Sie die Registerkarte "Netzwerk" in den Chrome-Entwicklungstools, um den Inhalt der Serverantwort anzuzeigen.

Dies war für mich ein Berechtigungsproblem. Ich habe versucht, mit cancan auf eine URL zuzugreifen, für die ich keine Berechtigung hatte, daher wurde die URL auf geändert users/sign_in. Die umgeleitete URL reagiert auf HTML, nicht auf JSON. Das erste Zeichen in einer HTML-Antwort ist <.

Ich habe diesen Fehler "SyntaxError: Unerwartetes Token m in JSON an Position" festgestellt, wobei das Token 'm' ein beliebiges anderes Zeichen sein kann.

Es stellte sich heraus, dass ich eines der doppelten Anführungszeichen im JSON-Objekt übersehen habe, als ich RESTconsole für den DB-Test als {"name:" math "} verwendete. Das richtige sollte {" name ":" math "} sein.

Ich habe mich sehr bemüht, diesen ungeschickten Fehler herauszufinden. Ich fürchte, andere würden auf ähnliche Trottel stoßen.

In meinem Fall wurde dieses Webpack ausgeführt, und es stellte sich heraus, dass es irgendwo im lokalen Verzeichnis node_modules beschädigt war.

rm -rf node_modules
npm install

... war genug, um es wieder zum Laufen zu bringen.

In meinem Fall war der Fehler darauf zurückzuführen, dass ich meinen Rückgabewert keiner Variablen zugewiesen habe. Folgendes hat die Fehlermeldung verursacht:

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

Ich habe es geändert in:

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

Ohne die Variable kann JSON die Daten nicht richtig formatieren.

Dieser Fehler tritt auf, wenn Sie die Antwort als definieren application/jsonund einen HTML-Code als Antwort erhalten. Grundsätzlich geschah dies, wenn Sie ein serverseitiges Skript für eine bestimmte URL mit einer Antwort von JSON schreiben, das Fehlerformat jedoch in HTML vorliegt.

Stellen Sie sicher, dass die Antwort im JSON-Format vorliegt. Andernfalls wird dieser Fehler ausgelöst.

Ich hatte das gleiche Problem, als
ich den Datentyp 'json' aus der $ .ajax-Methode entfernte

Ich hatte die gleiche Fehlermeldung nach einem Tutorial. Unser Problem scheint 'url: this.props.url' im Ajax-Aufruf zu sein. Wenn Sie in React.DOM Ihr Element erstellen, sieht mein Element so aus.

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

Nun, diese CommentBox hat keine URL in ihren Requisiten, nur Daten. Als ich url: this.props.url-> wechselte url: this.props.data, wurde der Server richtig angerufen und ich erhielt die erwarteten Daten zurück.

Ich hoffe, es hilft.

Mein Problem war, dass ich die Daten in einem zurückbekam string Format das nicht in einem geeigneten JSON-Format vorliegt, und das ich dann zu analysieren versuchte. simple example: JSON.parse('{hello there}')gibt einen Fehler bei h. In meinem Fall gab die Rückruf-URL ein unnötiges Zeichen vor den Objekten zurück: employee_names([{"name":....und es wurde ein Fehler bei e bei 0 angezeigt. Meine Rückruf-URL selbst hatte ein Problem, das, wenn es behoben wurde, nur Objekte zurückgab.

In meinem Fall wurde mein API-Aufruf von mySite / api / ... für eine von Azure gehostete Angular 2/4-Site aufgrund von mySite-Routingproblemen umgeleitet. Es wurde also der HTML-Code von der umgeleiteten Seite anstelle des API-JSON zurückgegeben. Ich habe einen Ausschluss in einer web.config-Datei für den API-Pfad hinzugefügt.

Ich habe diesen Fehler bei der lokalen Entwicklung nicht erhalten, da sich die Site und die API an verschiedenen Ports befanden. Es gibt wahrscheinlich einen besseren Weg, dies zu tun ... aber es hat funktioniert.

<?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>

Das könnte alt sein. Aber es kam nur im Winkel vor, der Inhaltstyp für Anforderung und Antwort war in meinem Code unterschiedlich. Überprüfen Sie die Header auf,

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

in Axios reagieren

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

Nachdem ich viel Zeit damit verbracht hatte, stellte ich fest, dass in meinem Fall das Problem darin bestand, dass "Homepage" in meiner package.json-Datei definiert war und meine App auf Firebase nicht funktionierte (der gleiche "Token" -Fehler). Ich habe meine React-App mit der Create-React-App erstellt, dann den Firebase-Leitfaden in der READ.me-Datei zum Bereitstellen auf Github-Seiten verwendet, festgestellt, dass ich zusätzliche Arbeit leisten muss, damit der Router funktioniert, und auf Firebase umgestellt. github guide hatte den Homepage-Schlüssel auf package.json hinzugefügt und das Bereitstellungsproblem verursacht.

Protip: Json auf einem lokalen Node.js-Server testen? Stellen Sie sicher, dass Sie noch kein Routing zu diesem Pfad haben

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

Im Allgemeinen tritt dieser Fehler auf, wenn ein JSON-Objekt analysiert wird, das Syntaxfehler enthält. Stellen Sie sich so etwas vor, bei dem die Nachrichteneigenschaft doppelte Anführungszeichen enthält:

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

Wenn Sie JSON irgendwo in Ihrer App haben, sollten Sie es über JSONLint ausführen , um sicherzustellen , dass kein Syntaxfehler vorliegt. Normalerweise ist dies nicht der Fall, aber meiner Erfahrung nach ist es JSON, das von einer API zurückgegeben wird, die der Schuldige ist.

Wenn eine XHR-Anforderung an eine HTTP-API gesendet wird, die eine Antwort mit einem Content-Type:application/json; charset=UTF-8Header zurückgibt, der ungültigen JSON im Antworttext enthält, wird dieser Fehler angezeigt.

Wenn ein serverseitiger API-Controller einen Syntaxfehler nicht ordnungsgemäß behandelt und als Teil der Antwort ausgedruckt wird, wird die Struktur des zurückgegebenen JSON beschädigt. Ein gutes Beispiel hierfür wäre eine API-Antwort, die eine PHP-Warnung oder einen Hinweis im Antworttext enthält:

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

In 95% der Fälle ist dies die Ursache des Problems für mich, und obwohl es hier in den anderen Antworten etwas angesprochen wird, hatte ich nicht das Gefühl, dass es klar beschrieben wurde. Hoffentlich hilft dies, wenn Sie nach einer praktischen Möglichkeit suchen, um herauszufinden, welche API-Antwort einen JSON-Syntaxfehler enthält. Ich habe dafür ein Angular-Modul geschrieben .

Hier ist das Modul:

/**
 * 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' );
    } ] );

Weitere Details finden Sie in dem Blog-Artikel, auf den oben verwiesen wurde. Ich habe hier nicht alles gepostet, da es wahrscheinlich nicht alle relevant ist.

Für mich geschah dies, als eine der Eigenschaften des Objekts, das ich als JSON zurückgab, eine Ausnahme auslöste.

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

Durch Hinzufügen eines Null-Checks wurde dies für mich behoben:

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

Stellen Sie sicher, dass in der JSON-Datei nichts auskommentiert ist

//comments here will not be parsed and throw error

Nur um die Antworten zu ergänzen, geschieht dies auch, wenn Ihre API-Antwort enthält

<?php{username: 'Some'}

Dies kann der Fall sein, wenn Ihr Backend PHP verwendet.

In Python können Sie json.Dump (str) verwenden, bevor Sie das Ergebnis an die HTML-Vorlage senden. Mit dieser Befehlszeichenfolge in das richtige JSON-Format konvertieren und an die HTML-Vorlage senden. Nachdem Sie dieses Ergebnis an JSON.parse (Ergebnis) gesendet haben, ist dies die richtige Antwort, und Sie können diese verwenden.

Für einige mag dies euch helfen: Ich hatte eine ähnliche Erfahrung mit der Wordpress REST API. Ich habe sogar Postman verwendet, um zu überprüfen, ob ich die richtigen Routen oder Endpunkte hatte. Ich fand später heraus, dass ich versehentlich ein "Echo" in mein Skript eingefügt habe - Hooks:

Debuggen und überprüfen Sie Ihre Konsole

Fehlerursache

Im Grunde bedeutet dies, dass ich einen Wert gedruckt habe, der nicht JSON ist und mit dem Skript gemischt ist, das den AJAX-Fehler verursacht - "SyntaxError: Unerwartetes Token r in JSON an Position 0".

Dies kann dazu führen, dass Ihr Javascript-Code eine JSON-Antwort anzeigt und Sie etwas anderes wie Text erhalten haben.

Ich hatte das gleiche Problem. Ich verwende einen einfachen node.js-Server, um eine Antwort an einen in Angular 7 erstellten Client zu senden. Anfangs habe ich response.end gesendet ('Hallo Welt vom nodejs-Server'). an den Kunden, aber irgendwie konnte Angular es nicht analysieren.

Diejenigen, die create-react-applokale JSON-Dateien verwenden und versuchen, diese abzurufen.

Wie in create-react-app, webpack-dev-serverwird verwendet , um die Anfrage zu bearbeiten und für jede Anforderung dient es die index.html. Also bekommst du

SyntaxError: Unerwartetes Token <in JSON an Position 0.

Um dies zu lösen, müssen Sie die App auswerfen und die webpack-dev-serverKonfigurationsdatei ändern .

Sie können den Schritten von hier aus folgen .

In meinem Fall (Backend) habe ich res.send (Token) verwendet.

Alles wurde repariert, als ich zu res.send (data) wechselte;

Möglicherweise möchten Sie dies überprüfen, wenn alles wie beabsichtigt funktioniert und veröffentlicht wird. Der Fehler tritt jedoch weiterhin in Ihrem Front-End auf.

Die Möglichkeiten für diesen Fehler sind überwältigend.

In meinem Fall stellte ich fest, dass das Problem das Hinzufügen des homepageeingereichten Dokuments package.jsonverursachte.

Überprüfenswert: im package.jsonWechsel:

homepage: "www.example.com"

zu

hompage: ""   

Kurz gesagt, wenn Sie diesen oder einen ähnlichen Fehler erhalten, bedeutet dies nur eines. Das heißt, irgendwo in unserer Codebasis haben wir erwartet, dass ein gültiges JSON-Format verarbeitet wird, und wir haben keines erhalten. Beispielsweise:

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

Wird einen Fehler werfen und sagen

Nicht erfasster SyntaxError: Unerwartete Token in JSON an Position 0

Da in das erste Zeichen stringist sund es ist kein gültiges JSON jetzt. Dies kann auch dazwischen Fehler werfen. mögen:

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

Wird Fehler werfen:

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

weil wir absichtlich ein Zitat in der JSON-Zeichenfolge invalidJSONan Position 36 verpasst haben .

Und wenn Sie das beheben:

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

gibt Ihnen ein Objekt in JSON.

Dieser Fehler kann nun an jedem Ort und in jedem Framework / jeder Bibliothek ausgelöst werden. Meistens lesen Sie möglicherweise eine Netzwerkantwort, die nicht gültig ist. Die Schritte zum Debuggen dieses Problems können also wie folgt aussehen:

1. curl oder klicken Sie auf die eigentliche API, die Sie aufrufen.
2. Protokollieren / kopieren Sie die Antwort und versuchen Sie, sie zu analysieren JSON.parse. Wenn Sie eine Fehlermeldung erhalten, beheben Sie diese.
3. Wenn nicht, stellen Sie sicher, dass Ihr Code die ursprüngliche Antwort nicht mutiert / ändert.

Wenn jemand anderes Fetch aus der Dokumentation "Using Fetch" für Web-APIs in Mozilla verwendet: (Dies ist sehr nützlich: 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);  });

Dies war innerhalb der Funktion:

async function postQRData(qr) {

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

Ich ging in meine Funktion über, qrwas ich für ein Objekt hielt, weil es so qraussah: {"name": "Jade", "lname": "Bet", "pet":"cat"}Aber ich bekam immer wieder Syntaxfehler. Als ich es etwas anderem zugewiesen habe: let qrdata = qr;es hat funktioniert.

Unerwartetes Token <in JSON an Position 0

Eine einfache Lösung für diesen Fehler besteht darin, einen Kommentar in eine styles.lessDatei zu schreiben .