"SyntaxError: token inesperado <en JSON en la posición 0"

En un componente de la aplicación React que maneja fuentes de contenido similares a Facebook, me encuentro con un error:

Feed.js: 94 "parsererror" indefinido "SyntaxError: token inesperado <en JSON en la posición 0

Me encontré con un error similar que resultó ser un error tipográfico en el HTML dentro de la función de renderizado, pero ese no parece ser el caso aquí.

Más confuso, volví el código a una versión anterior que funcionaba bien y todavía recibo el error.

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

En las herramientas para desarrolladores de Chrome, el error parece provenir de esta función:

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

con la línea console.error(this.props.url, status, err.toString()subrayada

Como parece que el error parece tener algo que ver con extraer datos JSON del servidor, intenté comenzar desde un db en blanco, pero el error persiste. El error parece ser llamado en un bucle infinito presumiblemente cuando React intenta continuamente conectarse al servidor y finalmente bloquea el navegador.

EDITAR:

Verifiqué la respuesta del servidor con las herramientas de desarrollo de Chrome y el cliente REST de Chrome, y los datos parecen ser JSON adecuados.

EDITAR 2:

Parece que aunque el punto final de API previsto está devolviendo los datos y el formato JSON correctos, React está sondeando en http://localhost:3000/?_=1463499798727lugar de lo esperado http://localhost:3001/api/threads.

Estoy ejecutando un servidor webpack hot-reload en el puerto 3000 con la aplicación express ejecutándose en el puerto 3001 para devolver los datos de back-end. Lo frustrante aquí es que esto funcionó correctamente la última vez que trabajé en él y no puedo encontrar lo que podría haber cambiado para romperlo.

La redacción del mensaje de error corresponde a lo que obtienes de Google Chrome cuando corres JSON.parse('<...'). Sé que dijiste que el servidor está configurando Content-Type:application/json, pero me hacen creer que el cuerpo de la respuesta es en realidad HTML.

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

con la línea console.error(this.props.url, status, err.toString())subrayada

En errrealidad, se arrojó dentro jQueryy se le pasó como una variable err. La razón por la que la línea está subrayada es simplemente porque allí es donde la está registrando.

Sugeriría que agregue a su registro. Mirando las xhrpropiedades reales (XMLHttpRequest) para obtener más información sobre la respuesta. Intente agregar console.warn(xhr.responseText)y lo más probable es que vea el HTML que se está recibiendo.

Está recibiendo HTML (o XML) del servidor, pero dataType: jsonle dice a jQuery que se analice como JSON. Verifique la pestaña "Red" en las herramientas de desarrollo de Chrome para ver el contenido de la respuesta del servidor.

Esto terminó siendo un problema de permisos para mí. Estaba tratando de acceder a una url para la que no tenía autorización con cancan, por lo que la url se cambió a users/sign_in. la URL redirigida responde a html, no a json. El primer carácter en una respuesta html es <.

Experimenté este error "SyntaxError: token inesperado m en JSON en la posición", donde el token 'm' puede ser cualquier otro carácter.

Resultó que me perdí una de las comillas dobles en el objeto JSON cuando estaba usando RESTconsole para la prueba DB, como {"name:" math "}, la correcta debería ser {" name ":" math "}

Me tomó mucho esfuerzo descubrir este torpe error. Me temo que otros se encontrarían con problemas similares.

En mi caso, estaba obteniendo este paquete web en ejecución, y resultó ser algo de corrupción en algún lugar del directorio local node_modules.

rm -rf node_modules
npm install

... fue suficiente para que volviera a funcionar correctamente.

En mi caso, el error fue el resultado de no asignar mi valor de retorno a una variable. Lo siguiente provocó el mensaje de error:

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

Lo cambié a:

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

Sin la variable, JSON no puede formatear correctamente los datos.

Este error ocurre cuando define la respuesta como application/jsony obtiene un HTML como respuesta. Básicamente, esto sucedió cuando está escribiendo una secuencia de comandos del lado del servidor para una URL específica con una respuesta de JSON pero el formato de error está en HTML.

Asegúrese de que la respuesta esté en formato JSON; de lo contrario, se activará este error.

Yo estaba frente a la misma edición
Quité el tipo de datos: 'json' a partir del método $ .ajax

Tuve el mismo mensaje de error después de un tutorial. Nuestro problema parece ser 'url: this.props.url' en la llamada ajax. En React.DOM cuando está creando su elemento, el mío se ve así.

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

Bueno, este CommentBox no tiene una url en sus accesorios, solo datos. Cuando cambié url: this.props.url-> url: this.props.data, hice la llamada correcta al servidor y recuperé los datos esperados.

Espero que ayude.

Mi problema fue que estaba recuperando los datos en un stringformato JSON que no estaba en un formato adecuado, que estaba tratando de analizar. simple example: JSON.parse('{hello there}')dará un error en h. En mi caso, la URL de devolución de llamada devolvía un carácter innecesario antes de los objetos: employee_names([{"name":....y recibía un error en e en 0. Mi URL de devolución de llamada en sí tenía un problema que, cuando se solucionaba, solo devolvía objetos.

En mi caso, para un sitio alojado en Azure Angular 2/4, mi llamada API a mySite / api / ... se estaba redirigiendo debido a problemas de enrutamiento de mySite. Entonces, estaba devolviendo el HTML de la página redirigida en lugar de la API JSON. Agregué una exclusión en un archivo web.config para la ruta de la API.

No recibía este error al desarrollar localmente porque el Sitio y la API estaban en puertos diferentes. Probablemente haya una mejor manera de hacer esto ... pero funcionó.

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

Esto puede ser viejo. Pero, solo ocurrió en angular, el tipo de contenido para solicitud y respuesta era diferente en mi código. Entonces, revisa los encabezados para,

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

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

Después de pasar mucho tiempo con esto, descubrí que en mi caso el problema era que la "página de inicio" definida en mi archivo package.json hacía que mi aplicación no funcionara en firebase (mismo error 'token'). Creé mi aplicación reaccionar usando create-react-app, luego usé la guía firebase en el archivo READ.me para implementar en páginas github, me di cuenta de que tenía que hacer un trabajo adicional para que el enrutador funcionara y cambié a firebase. github guide había agregado la clave de la página de inicio en package.json y provocó el problema de implementación.

Protip: ¿Prueba json en un servidor Node.js local? Asegúrate de no tener algo enrutado hacia ese camino

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

A nivel general, este error ocurre cuando se analiza un objeto JSON que tiene errores de sintaxis. Piense en algo como esto, donde la propiedad del mensaje contiene comillas dobles sin escape:

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

Si tiene JSON en su aplicación en algún lugar, entonces es bueno ejecutarlo a través de JSONLint para verificar que no tenga un error de sintaxis. Por lo general, este no es el caso, aunque en mi experiencia, generalmente es JSON devuelto de una API que es el culpable.

Cuando se realiza una solicitud XHR a una API HTTP que devuelve una respuesta con un Content-Type:application/json; charset=UTF-8encabezado que contiene JSON no válido en el cuerpo de la respuesta, verá este error.

Si un controlador API del lado del servidor maneja incorrectamente un error de sintaxis y se imprime como parte de la respuesta, se romperá la estructura de JSON devuelta. Un buen ejemplo de esto sería una respuesta API que contenga una Advertencia o Aviso PHP en el cuerpo de la respuesta:

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

El 95% de las veces esta es la fuente del problema para mí, y aunque de alguna manera se aborda aquí en las otras respuestas, no sentí que se describiera claramente. Espero que esto ayude, si está buscando una forma práctica de rastrear qué respuesta de API contiene un error de sintaxis JSON, he escrito un módulo angular para eso .

Aquí está el módulo:

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

Se pueden encontrar más detalles en el artículo del blog mencionado anteriormente, no he publicado todo lo que se encuentra aquí, ya que probablemente no todo sea relevante.

Para mí, esto sucedió cuando una de las propiedades del objeto que estaba devolviendo cuando JSON lanzó una excepción.

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

Al agregar un cheque nulo, lo arregló para mí:

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

solo algo básico para verificar, asegúrate de no tener nada comentado en el archivo json

//comments here will not be parsed and throw error

Solo para agregar a las respuestas, también sucede cuando su respuesta API incluye

<?php{username: 'Some'}

lo cual podría ser un caso cuando tu backend está usando PHP.

En python puede usar json.Dump (str) antes de enviar el resultado a la plantilla html. con esta cadena de comando, conviértala al formato json correcto y envíela a la plantilla html. Después de enviar este resultado a JSON.parse (resultado), esta es la respuesta correcta y puede usarla.

Para algunos, esto puede ayudarlos, muchachos: tuve una experiencia similar con la API REST de Wordpress. Incluso utilicé Postman para verificar si tenía las rutas correctas o el punto final. Más tarde descubrí que accidentalmente puse un "eco" dentro de mi script - ganchos:

Depura y verifica tu consola

Causa del error

Básicamente, esto significa que imprimí un valor que no es JSON que se mezcla con el script que causa el error AJAX - "SyntaxError: token inesperado r en JSON en la posición 0"

Esto puede deberse a que su código JavaScript está buscando alguna respuesta json y recibió algo más como texto.

Estaba teniendo el mismo problema Estoy usando un servidor simple node.js para enviar respuestas a un cliente hecho en Angular 7. Inicialmente estaba enviando response.end ('Hola mundo desde el servidor nodejs'); al cliente, pero de alguna manera angular no pudo analizarlo.

Aquellos que usan create-react-appe intentan obtener archivos json locales.

Como en create-react-app, webpack-dev-serverse utiliza para manejar la solicitud y para cada solicitud que sirve index.html. Entonces estás consiguiendo

SyntaxError: token inesperado <en JSON en la posición 0.

Para resolver esto, debe expulsar la aplicación y modificar el webpack-dev-serverarchivo de configuración.

Puedes seguir los pasos desde aquí .

En mi caso (backend), estaba usando res.send (token);

Todo se arregló cuando cambié a res.send (datos);

Es posible que desee verificar esto si todo funciona y se publica según lo previsto, pero el error sigue apareciendo en su front-end.

Las posibilidades de este error son abrumadoras.

En mi caso, descubrí que el problema era agregar el homepagearchivo que package.jsoncausó el problema.

Vale la pena comprobar: en package.jsoncambio:

homepage: "www.example.com"

a

hompage: ""   

En pocas palabras, si obtiene este error o un error similar, eso significa solo una cosa. Es decir, en algún lugar de nuestra base de código esperábamos que se procesara un formato JSON válido y no obtuvimos uno. Por ejemplo:

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

Lanzará un error, diciendo

SyntaxError no capturado: tokens inesperados s en JSON en la posición 0

Porque, el primer carácter en stringes sy no es un JSON válido ahora. Esto puede arrojar un error en el medio también. me gusta:

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

Lanzará error:

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

porque intencionalmente perdimos una cita en la cadena JSON invalidJSONen la posición 36.

Y si arreglas eso:

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

te dará un objeto en JSON.

Ahora, este error se puede lanzar en cualquier lugar y en cualquier marco / biblioteca. La mayoría de las veces puede estar leyendo una respuesta de red que no es JSON válida. Entonces, los pasos para depurar este problema pueden ser:

1. curl o presione la API real que está llamando.
2. Registre / copie la respuesta e intente analizarla con JSON.parse. Si obtiene un error, corríjalo.
3. De lo contrario, asegúrese de que su código no esté mutando / cambiando la respuesta original.

Si alguien más usa fetch de la documentación "Uso de Fetch" en API web en Mozilla: (Esto es realmente útil: 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);  });

Esto estaba dentro de la función:

async function postQRData(qr) {

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

Estaba pasando a mi función qrlo que creía que era un objeto porque se qrveía así: {"name": "Jade", "lname": "Bet", "pet":"cat"}pero seguía recibiendo errores de sintaxis. Cuando lo asigné a otra cosa: let qrdata = qr;funcionó.

Token inesperado <en JSON en la posición 0

Una solución simple a este error es escribir un comentario en el styles.lessarchivo.