it-swarm.com.de

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

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

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

Ich bin auf einen ähnlichen Fehler gestoßen, der sich als HTML-Tippfehler in der Renderfunktion herausstellte. Dies scheint jedoch hier nicht der Fall zu sein. 

Verblüffenderweise habe ich den Code auf eine frühere, bekannt funktionierende Version zurückgesetzt, und ich bekomme immer noch den Fehler. 

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 Zeile 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 in einer Endlosschleife aufgerufen zu werden, vermutlich weil React ständig versucht, sich mit dem Server zu verbinden und schließlich den Browser abstürzt.

BEARBEITEN: 

Ich habe die Serverantwort mit Chrome-Entwicklertools und Chrome REST -Client überprüft, und die Daten scheinen korrektes JSON zu sein.

EDIT 2:

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

Ich verwende einen Webpack-Hot-Reload-Server auf Port 3000, während die Express-App auf Port 3001 ausgeführt wird, um die Back-End-Daten zurückzugeben. Was frustrierend ist, ist, dass dies beim letzten Mal richtig funktioniert hat und ich nicht finden kann, was ich hätte ändern können, um es zu brechen. 

121
Cameron Sima

Der Wortlaut der Fehlermeldung entspricht dem von Google Chrome, wenn Sie JSON.parse('<...') ausführen. Ich weiß, Sie sagten, dass der Server Content-Type:application/json einstellt, aber ich bin überzeugt, dass die Antwort body eigentlich HTML ist.

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

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

Die Variable err wurde tatsächlich innerhalb von jQuery geworfen und als Variable err an Sie übergeben. Der Grund dafür, dass diese Zeile unterstrichen ist, liegt einfach daran, dass Sie sie hier protokollieren.

Ich würde vorschlagen, dass Sie Ihre Protokollierung hinzufügen. Schauen Sie sich die tatsächlichen xhr (XMLHttpRequest) -Eigenschaften an, um mehr über die Antwort zu erfahren. Versuchen Sie, console.warn(xhr.responseText) hinzuzufügen, und Sie werden wahrscheinlich den empfangenen HTML-Code sehen.

111
George Bailey

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

33
nil

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

9

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

Es stellte sich heraus, dass ich bei der Verwendung von RESTconsole für den DB-Test eines der Anführungszeichen im JSON-Objekt verpasst hatte, da {"name:" math "} das korrekte {" name ":" math "}

Es hat mich viel Mühe gekostet, diesen ungeschickten Fehler herauszufinden. Ich fürchte, andere würden auf ähnliche Bummler stoßen. 

5
VictorL

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

rm -rf node_modules
npm install

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

5
Kev

In meinem Fall war der Fehler darauf zurückzuführen, dass ich meinen Rückgabewert keiner Variablen zuweise. 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.

3
Versatile

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 meins 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 -> url: this.props.data gewechselt habe, habe ich den Server richtig angerufen und die erwarteten Daten erhalten. 

Ich hoffe, es hilft.

1
Timea

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

Mein Problem war, dass ich die Daten in einer string zurückbekam, die nicht in einem richtigen JSON-Format war, das ich dann zu analysieren versuchte. simple example: JSON.parse('{hello there}') gibt bei h einen Fehler aus. In meinem Fall gab die Callback-URL vor den Objekten ein ungenutztes Zeichen zurück: employee_names([{"name":.... und erhielt einen Fehler bei e um 0. Meine Callback-URL selbst hatte ein Problem, das bei der Behebung nur Objekte zurückgab. 

1
Deke

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

Ich habe diesen Fehler beim lokalen Entwickeln nicht erhalten, da sich Site und API auf unterschiedlichen 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>
1
Dave

Diejenigen, die create-react-app verwenden und versuchen, lokale JSON-Dateien abzurufen.

Wie in create-react-app wird webpack-dev-server verwendet, um die Anforderung zu verarbeiten, und für jede Anforderung wird der index.html bereitgestellt. Sie bekommen also

SyntaxError: Unerwartetes Token <in JSON an Position 0.

Um dieses Problem zu beheben, müssen Sie die App auswerfen und die webpack-dev-server-Konfigurationsdatei ändern.

Sie können den Schritten von hier folgen.

1
an0nym0us

Dieser Fehler tritt auf, wenn Sie die Antwort als application/json definieren und als Antwort HTML erhalten. Grundsätzlich ist dies der Fall, wenn Sie mit einer Antwort von JSON serverseitige Skripts für bestimmte URLs schreiben, das Fehlerformat jedoch in HTML vorliegt.

1

Das könnte alt sein. Aber es kam gerade in eckig vor, der Inhaltstyp für Anforderung und Antwort unterschied sich in meinem Code. Also, überprüfen Sie die Header für

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

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

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

0
R Karwalkar

Für mich geschah dies, als eine der Eigenschaften des Objekts, das ich als JSON zurückgegeben hatte, 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;
    }
}

Hinzufügen eines Null-Checks 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;
    }
}
0
Window

Im Allgemeinen tritt dieser Fehler auf, wenn ein JSON-Objekt analysiert wird, das Syntaxfehler enthält. Stellen Sie sich etwas wie das 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, ist es ratsam, es über JSONLint auszuführen, um zu überprüfen, ob es keinen Syntaxfehler gibt. Normalerweise ist dies nicht der Fall, obwohl meiner Erfahrung nach JSON von einer API zurückgegeben wurde, die der Täter ist.

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

Wenn ein serverseitiger API-Controller einen Syntaxfehler nicht ordnungsgemäß verarbeitet und als Teil der Antwort ausgedruckt wird, wird die zurückgegebene Struktur von JSON beschädigt. Ein gutes Beispiel dafür wäre eine API-Antwort, die im Antworttext eine Warnung oder Nachricht von PHP 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 Quelle des Problems für mich, und obwohl es hier in den anderen Antworten etwas angesprochen wurde, hatte ich nicht das Gefühl, dass es eindeutig beschrieben wurde. Hoffentlich hilft dies, wenn Sie nach einem praktischen Weg suchen, um herauszufinden, welche API-Antwort einen JSON-Syntaxfehler enthält. Ich habe ein Angular-Modul für das 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 Informationen finden Sie in dem oben genannten Blogartikel. Ich habe hier nicht alles gepostet, da es wahrscheinlich nicht alles relevant ist.

0
Kevin Leary

Für einige kann dies Ihnen helfen: Ich hatte ähnliche Erfahrungen mit Wordpress REST API. Ich habe sogar Postman verwendet, um zu überprüfen, ob ich die richtigen Routen oder den richtigen Endpunkt hatte. Ich habe später herausgefunden, dass ich versehentlich ein "Echo" in meine Skript-Hooks eingefügt habe:

Debuggen und überprüfen Sie Ihre Konsole

Ursache des Fehlers

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

0
Ray Macz

nur etwas grundlegendes zu überprüfen, stellen Sie sicher, dass Sie nichts in der Json-Datei kommentiert haben

//comments here will not be parsed and throw error
0
Akin Hwan

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

0
Maddy

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

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

Möglicherweise möchten Sie überprüfen, ob alles funktioniert und wie beabsichtigt gepostet wurde, aber der Fehler taucht weiterhin in Ihrem Front-End auf.

0
Abak

Nachdem ich viel Zeit damit verbracht hatte, stellte ich fest, dass das Problem in meinem Fall darin bestand, dass in meiner package.json-Datei die "Homepage" definiert war. Meine App funktionierte nicht mit Firebase (gleicher "token" -Fehler) ..__ Meine Reakt-App mit Create-React-App. Dann benutzte ich die Firebase-Anleitung für die Datei READ.me, um sie auf Github-Seiten bereitzustellen, erkannte, dass ich zusätzliche Arbeit für den Router erledigen musste, und wechselte zu Firebase. github guide hatte den homepage-Schlüssel auf package.json hinzugefügt und das Bereitstellungsproblem verursacht.

0
Alejandro B.

In Python können Sie json.Dump (str) verwenden, bevor Sie das Ergebnis 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.

0
user2713125

Nur um die Antworten hinzuzufügen, geschieht dies auch, wenn Ihre API-Antwort dies beinhaltet 

<?php{username: 'Some'}

dies könnte ein Fall sein, wenn Ihr Backend PHP verwendet.

0
Tushar Sharma

Protip: Testen von Json auf einem lokalen Node.js-Server? Stellen Sie sicher, dass Sie noch nicht über einen Pfad zu diesem Pfad verfügen

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