„Błąd składni: nieoczekiwany token <w JSON na pozycji 0”

W komponencie aplikacji React, który obsługuje kanały informacyjne podobne do Facebooka, pojawia się błąd:

Feed.js: 94 undefined „parsererror” „Błąd składni: Nieoczekiwany token <w JSON na pozycji 0

Wystąpił podobny błąd, który okazał się literówką w kodzie HTML w ramach funkcji renderowania, ale tutaj chyba tak nie jest.

Co bardziej mylące, przywróciłem kod do wcześniejszej, znanej, działającej wersji i nadal pojawia się błąd.

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

W narzędziach programistycznych Chrome wydaje się, że błąd pochodzi z tej funkcji:

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

z console.error(this.props.url, status, err.toString()podkreśloną linią .

Ponieważ wygląda na to, że błąd ma coś wspólnego z pobieraniem danych JSON z serwera, próbowałem zacząć od pustej bazy danych, ale błąd nadal występuje. Błąd wydaje się być wywoływany w nieskończonej pętli, ponieważ React ciągle próbuje połączyć się z serwerem i ostatecznie zawiesza przeglądarkę.

EDYTOWAĆ:

Sprawdziłem odpowiedź serwera za pomocą narzędzi programistycznych Chrome i klienta Chrome REST, a dane wydają się być poprawne JSON.

EDYCJA 2:

Wygląda na to, że chociaż zamierzony punkt końcowy interfejsu API rzeczywiście zwraca poprawne dane i format JSON, program React odpytuje http://localhost:3000/?_=1463499798727zamiast oczekiwanego http://localhost:3001/api/threads.

Korzystam z serwera ponownego ładowania pakietu WebPack na porcie 3000 z aplikacją ekspresową działającą na porcie 3001, aby zwrócić dane zaplecza. Frustrujące jest tutaj to, że działało to poprawnie, kiedy ostatni raz nad tym pracowałem i nie mogę znaleźć tego, co mógłbym zmienić, aby to zepsuć.

Treść komunikatu o błędzie odpowiada temu, co otrzymujesz z Google Chrome po uruchomieniu JSON.parse('<...'). Wiem, że serwer jest w trakcie tworzenia Content-Type:application/json, ale ja skłonni uwierzyć reakcja ciała jest rzeczywiście HTML.

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

z console.error(this.props.url, status, err.toString())podkreśloną linią .

errFaktycznie rzucony wewnątrz jQuery, i przeszedł do was jako zmienna err. Powodem podkreślenia linii jest po prostu to, że właśnie tam ją rejestrujesz.

Sugeruję dodanie do logowania. Patrząc na rzeczywiste xhrwłaściwości (XMLHttpRequest), aby dowiedzieć się więcej o odpowiedzi. Spróbuj dodać, console.warn(xhr.responseText)a najprawdopodobniej zobaczysz otrzymany kod HTML.

Otrzymujesz HTML (lub XML) z powrotem z serwera, ale dataType: jsonmówi jQuery, aby parsował jako JSON. Sprawdź kartę „Sieć” w narzędziach programistycznych Chrome, aby zobaczyć treść odpowiedzi serwera.

Skończyło się to dla mnie problemem z uprawnieniami. Próbowałem uzyskać dostęp do adresu URL, na który nie miałem autoryzacji za pomocą Cancan, więc adres URL został zmieniony na users/sign_in. przekierowany adres URL odpowiada na HTML, a nie JSON. Pierwszym znakiem w odpowiedzi HTML jest <.

Wystąpił błąd „Błąd składni: nieoczekiwany token mw JSON na pozycji”, gdzie tokenem „m” mogą być dowolne inne znaki.

Okazało się, że przeoczyłem jedno z podwójnych cudzysłowów w obiekcie JSON, gdy korzystałem z RESTconsole do testu DB, ponieważ {"name:" matematyka "}, poprawne powinno być {" name ":" matematyka "}

Dużo wysiłku zajęło mi zrozumienie tego niezdarnego błędu. Obawiam się, że inni wpadliby na podobne zderzaki.

W moim przypadku otrzymywałem ten działający pakiet WWW i okazało się, że jest to jakieś uszkodzenie gdzieś w lokalnym katalogu node_modules.

rm -rf node_modules
npm install

... wystarczyło, aby znów działało poprawnie.

W moim przypadku błąd był wynikiem tego, że nie przypisałem mojej wartości zwrotnej do zmiennej. Następujące spowodowało komunikat o błędzie:

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

Zmieniłem to na:

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

Bez zmiennej JSON nie może poprawnie sformatować danych.

Ten błąd występuje, gdy zdefiniujesz odpowiedź jako application/jsoni otrzymasz HTML jako odpowiedź. Zasadniczo stało się tak, gdy piszesz skrypt po stronie serwera dla określonego adresu URL z odpowiedzią JSON, ale format błędu jest w formacie HTML.

napotkałem ten sam problem
i usunąłem dataType: 'json' z metody $ .ajax

Upewnij się, że odpowiedź jest w formacie JSON, w przeciwnym razie wystąpi błąd.

Po samouczku miałem ten sam komunikat o błędzie. Naszym problemem wydaje się być „url: this.props.url” w wywołaniu ajax. W React.DOM podczas tworzenia elementu mój wygląda tak.

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

Cóż, ten CommentBox nie ma adresu URL w swoich rekwizytach, tylko dane. Po przełączeniu url: this.props.url-> wykonałem url: this.props.dataprawidłowe połączenie z serwerem i odzyskałem oczekiwane dane.

Mam nadzieję, że to pomoże.

Mój problem polegał na tym, że odzyskiwałem dane w formacie, stringktóry nie był w odpowiednim formacie JSON, a następnie próbowałem je przeanalizować. simple example: JSON.parse('{hello there}')da błąd o godz. W moim przypadku adres URL wywołania zwrotnego zwracał niepotrzebny znak przed obiektami: employee_names([{"name":....i pojawiał się błąd o wartości 0 na poziomie 0. Mój adres URL wywołania zwrotnego miał problem, który po naprawieniu zwracał tylko obiekty.

W moim przypadku w przypadku hostowanej na platformie Angular 2/4 witryny Azure moje wywołanie interfejsu API do witryny mySite / api / ... przekierowywało z powodu problemów z routingiem witryny mySite. Tak więc zwracał HTML ze strony przekierowanej zamiast JSON interfejsu API. Dodałem wykluczenie w pliku web.config dla ścieżki interfejsu API.

Ten błąd nie pojawiał się podczas programowania lokalnego, ponieważ witryna i interfejs API znajdowały się na różnych portach. Prawdopodobnie jest na to lepszy sposób ... ale zadziałało.

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

To może być stare. Ale to właśnie wystąpiło w kanciastym typie treści dla zapytania i odpowiedzi były różne w moim kodzie. Więc sprawdź nagłówki,

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

w Reakcja osi

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

Krótko mówiąc, jeśli pojawia się ten błąd lub podobny błąd, oznacza to tylko jedno. Oznacza to, że gdzieś w naszej bazie kodu spodziewaliśmy się przetworzenia prawidłowego formatu JSON i nie otrzymaliśmy go. Na przykład:

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

Zgłasza błąd, mówiąc

Uncaught SyntaxError: Nieoczekiwany token s w JSON na pozycji 0

Ponieważ pierwsza postać stringto si nie jest to teraz prawidłowy JSON. Może to również powodować błąd pośredni. lubić:

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

Zgłasza błąd:

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

ponieważ celowo przegapiliśmy cytat w ciągu JSON invalidJSONna pozycji 36.

A jeśli to naprawisz:

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

da ci obiekt w JSON.

Teraz ten błąd może zostać zgłoszony w dowolnym miejscu i dowolnej ramie / bibliotece. Przez większość czasu możesz czytać odpowiedź sieci, która nie jest poprawna JSON. Tak więc kroki debugowania tego problemu mogą wyglądać następująco:

1. curl lub naciśnij rzeczywisty interfejs API, do którego dzwonisz.
2. Zaloguj / skopiuj odpowiedź i spróbuj ją przeanalizować JSON.parse. Jeśli pojawia się błąd, napraw go.
3. Jeśli nie, upewnij się, że kod nie mutuje / nie zmienia oryginalnej odpowiedzi.

Po spędzeniu z tym dużo czasu dowiedziałem się, że w moim przypadku problemem było zdefiniowanie „strony głównej” w moim pliku package.json, co spowodowało, że moja aplikacja nie działa na Firebase (ten sam błąd „tokena”). Utworzyłem aplikację reagującą za pomocą aplikacji create-reag-app, a następnie skorzystałem z przewodnika firebase w pliku READ.me w celu wdrożenia na stronach github, zdałem sobie sprawę, że muszę wykonać dodatkową pracę, aby router mógł działać, i przełączyłem się na firebase. Przewodnik github dodał klucz strony głównej w package.json i spowodował problem z wdrożeniem.

Protip: Testujesz json na lokalnym serwerze Node.js? Upewnij się, że nie masz jeszcze trasy do tej ścieżki

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

Na poziomie ogólnym ten błąd występuje, gdy analizowany jest obiekt JSON, który zawiera błędy składniowe. Pomyśl o czymś takim, w którym właściwość message zawiera nieoznaczone podwójne cudzysłowy:

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

Jeśli gdzieś masz JSON w aplikacji, dobrze jest uruchomić go przez JSONLint aby sprawdzić, czy nie ma błędu składniowego. Zwykle tak nie jest, choć z mojego doświadczenia wynika, że ​​zwykle JSON powrócił z API, które jest winowajcą.

Po wysłaniu żądania XHR do interfejsu API HTTP, który zwraca odpowiedź za pomocą Content-Type:application/json; charset=UTF-8 nagłówkiem zawierającym niepoprawny kod JSON w treści odpowiedzi, pojawi się ten błąd.

Jeśli kontroler interfejsu API po stronie serwera nieprawidłowo obsługuje błąd składniowy i jest drukowany jako część odpowiedzi, spowoduje to uszkodzenie struktury zwróconego JSON. Dobrym przykładem może być odpowiedź API zawierająca Ostrzeżenie PHP lub Zawiadomienie w treści odpowiedzi:

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

W 95% przypadków jest to dla mnie źródło problemu i chociaż w innych odpowiedziach jest to nieco omówione, nie czułem, aby zostało to jasno opisane. Mam nadzieję, że to pomaga, jeśli szukasz wygodnego sposobu na sprawdzenie, która odpowiedź API zawiera błąd składniowy JSON, napisałem do tego moduł Angular .

Oto moduł:

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

Więcej szczegółów można znaleźć w artykule na blogu, o którym mowa powyżej, nie opublikowałem tu wszystkiego, ponieważ prawdopodobnie nie wszystkie są istotne.

Dla mnie tak się stało, gdy jedna z właściwości obiektu, do której zwracałem, gdy JSON zgłosił wyjątek.

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

Dodając czek zerowy, naprawiłem to dla mnie:

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

po prostu coś podstawowego do sprawdzenia, upewnij się, że nic nie zostało skomentowane w pliku json

//comments here will not be parsed and throw error

Aby dodać do odpowiedzi, dzieje się tak również wtedy, gdy zawiera odpowiedź API

<?php{username: 'Some'}

co może mieć miejsce, gdy backend używa PHP.

W pythonie możesz użyć json.Dump (str) przed wysłaniem wyniku do szablonu HTML. z tym ciągiem poleceń przekonwertuj na prawidłowy format Json i wyślij do szablonu HTML. Po wysłaniu tego wyniku do JSON.parse (wynik), jest to poprawna odpowiedź i możesz go użyć.

Dla niektórych może to wam pomóc: miałem podobne doświadczenia z Wordpress REST API. Użyłem nawet Listonosza, aby sprawdzić, czy mam prawidłowe trasy lub punkt końcowy. Później dowiedziałem się, że przypadkowo wstawiłem „echo” do mojego skryptu - przechwytuje:

Debuguj i sprawdź konsolę

Przyczyna błędu

Zasadniczo oznacza to, że wydrukowałem wartość inną niż JSON, która jest mieszana ze skryptem powodującym błąd AJAX - „Błąd składni: Nieoczekiwany token rw JSON w pozycji 0”

Może to być spowodowane tym, że Twój kod javascript szuka odpowiedzi JSON i otrzymałeś coś innego jak tekst.

Miałem ten sam problem. Używam prostego serwera node.js do wysyłania odpowiedzi do klienta wykonanego w Angular 7. Początkowo wysyłałem odpowiedź.end („Witaj świecie z serwera nodejs”); do klienta, ale w jakiś sposób kanciasty nie był w stanie go przeanalizować.

Ci, którzy używają create-react-appi próbują pobrać lokalne pliki Json.

Jak w create-react-app, webpack-dev-serversłuży do obsługi żądania i dla każdego żądania służy index.html. Więc dostajesz

Błąd składni: nieoczekiwany token <w JSON na pozycji 0.

Aby rozwiązać ten problem, musisz wysunąć aplikację i zmodyfikować webpack-dev-serverplik konfiguracyjny.

Możesz postępować zgodnie z instrukcjami tutaj .

W moim przypadku (backend) korzystałem z res.send (token);

Wszystko zostało naprawione, kiedy zmieniłem na res.send (dane);

Możesz to sprawdzić, jeśli wszystko działa i publikuje zgodnie z przeznaczeniem, ale błąd pojawia się w interfejsie użytkownika.

Możliwości tego błędu są przytłaczające.

W moim przypadku okazało się, że problem polegał na dodaniu homepagezłożonego package.jsonzgłoszenia.

Warto sprawdzić: w package.jsonzmianie:

homepage: "www.example.com"

do

hompage: ""   

Jeśli ktoś inny używa pobierania z dokumentacji „Korzystanie z pobierania” w interfejsie API sieci Web w Mozilli: (Jest to naprawdę przydatne: 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);  });

To było w funkcji:

async function postQRData(qr) {

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

Przekazywałem do swojej funkcji qrcoś, co uważałem za obiekt, ponieważ qrwyglądało tak: {"name": "Jade", "lname": "Bet", "pet":"cat"}ale ciągle pojawiały się błędy składniowe. Kiedy przypisałem to do czegoś innego: let qrdata = qr;zadziałało.

Nieoczekiwany token <w JSON na pozycji 0

Prostym rozwiązaniem tego błędu jest napisanie komentarza w styles.lesspliku.