javascript - syntaxerror - unexpected token<in json at position 0 php

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

Question

En un componente de la aplicación React que maneja las 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() subrayado.

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 http://localhost:3000/?_=1463499798727 lugar del http://localhost:3001/api/threads esperado.

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.

Answer 1

Token inesperado <en JSON en la posición 0

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

Answer 2

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 tipo de Content-Type:application/json; charset=UTF-8 Content-Type:application/json; charset=UTF-8 encabezado que contiene JSON no válido en el cuerpo de la respuesta, verá este error.

Si un controlador de 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 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 sea del todo relevante.

Answer 3

Aquellos que usan create-react-app e intentan recuperar archivos json locales.

Al igual que en create-react-app , webpack-dev-server se usa para manejar la solicitud y para cada solicitud sirve el 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 archivo de configuración de webpack-dev-server .

Puedes seguir los pasos desde here .

Answer 4

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

Answer 5

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 react 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.

Answer 6

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.

Answer 7

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.

Answer 8

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.

Answer 9

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>

Answer 10

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.

Answer 11

Está recibiendo HTML (o XML) del servidor, pero el tipo de datos dataType: json le 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.

Answer 12

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.

Answer 13

Este error ocurre cuando define la respuesta como application/json y 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.

Answer 14

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

Answer 15

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

Answer 16

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

Answer 17

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.

Answer 18

La redacción del mensaje de error corresponde a lo que obtiene de Google Chrome cuando ejecuta 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()) subrayado.

El err fue arrojado dentro de jQuery , y pasó a usted como un err variable. 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 xhr reales de xhr (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.

Answer 19

Mi problema era que estaba recuperando los datos en una string que no estaba en un formato JSON 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 tenía un problema que, cuando se solucionaba, solo devolvía objetos .

Answer 20

Para algunos, esto puede ayudarlos, muchachos: tuve una experiencia similar con Wordpress REST API. 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"

Answer 21

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

Answer 22

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

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

Answer 23

Recibí 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 url: this.props.url -> url: this.props.data , realizó la llamada correcta al servidor y url: this.props.data los datos esperados.

Espero que ayude.

Answer 24

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.

Answer 25

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

//comments here will not be parsed and throw error