Cómo corregir un error de sintaxis: Token inesperado < en JSON en posición 0

El Error de sintaxis: Token inesperado < en JSON en posición 0 indica que el código JavaScript ha recibido datos que no son JSON, normalmente HTML, en lugar del formato JSON previsto. Para solucionar el problema, examina los datos recibidos para determinar la causa. Si utilizas fetch() o JSON.parse(), registra los datos en la consola y comprueba si hay errores comunes como direcciones URL incorrectas, errores del servidor o problemas de codificación de caracteres o asignación de variables.

Esta guía te ayudará a corregir el error Error de sintaxis: Token inesperado < en JSON en posición 0. Esta guía también se aplica a estas otras variantes frecuentes del mismo error:

Resumen

Estos errores indican que tu código JavaScript esperaba recibir JSON, pero en su lugar recibió algo distinto (probablemente HTML en forma de error del lado del servidor). Para solucionar el problema, debes examinar lo que recibiste en lugar del JSON esperado para determinar cuál es el problema.

Detalles

Normalmente, este error se produce cuando el servidor devuelve HTML (que suele empezar por <DOCTYPE html> o <html>) en lugar de JSON. Un JSON válido no puede comenzar con un carácter <, por lo que el analizador JSON sabe al instante que los datos no son válidos y produce uno de los errores mencionados antes.

Para arreglar este error, necesitas averiguar por qué obtienes el HTML (u otra cosa) en lugar del JSON que esperabas. Para ello necesitas registrar en la consola los datos que estás tratando de analizar.

Si estás usando fetch()

Utiliza este enfoque si tu código es similar a los siguientes ejemplos:

fetch('https://example.com/some/path/to/json')
.then(function (response) {
    return response.json();
})
.then(function (data) {
    // Do something with data
});

En este caso, el error aparece cuando response.json() intenta ejecutarse y no consigue analizar los datos del servidor como JSON. Puedes añadir una función para gestionar el error y mostrar en bruto el texto del cuerpo de la respuesta del servidor y registrarlo en la consola (consulta las notas sobre las líneas comentadas a continuación):

var responseClone; // 1
fetch('https://example.com/some/path/to/json')
.then(function (response) {
    responseClone = response.clone(); // 2
    return response.json();
})
.then(function (data) {
    // Do something with data
}, function (rejectionReason) { // 3
    console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4
    responseClone.text() // 5
    .then(function (bodyText) {
        console.log('Received the following instead of valid JSON:', bodyText); // 6
    });
});

A continuación, se explica cada línea con un comentario numerado:

  1. Se necesita la variable responseClone para conservar una copia del objeto response porque el cuerpo de response solo se puede leer una vez. Cuando se llama a response.json(), se lee el cuerpo del response original, por lo que no se puede volver a leer cuando se maneja el error de análisis de JSON. Al clonar response en responseClone, se generan dos copias del cuerpo de la respuesta con las que se puede trabajar: una en el response original para usarla con response.json() y otra para usarla con responseClone.text() si response.json() falla.
  2. Esta línea completa la variable responseClone con una copia de la respuesta recibida del servidor.
  3. Se pasa el segundo argumento de la función a la función then() que sigue a la llamada response.json(). Se llamará a esta segunda función si se rechaza la promesa response.json() (es decir, se encuentra un error de JSON).
  4. Esta línea registra la rejectionReason de la promesa response.json() y la responseClone para que se analice si es necesario (por ejemplo, el estado del código HTTP suele ser útil para la depuración).
  5. En lugar de intentar analizar como JSON el cuerpo de la respuesta del servidor, se introduce como texto sin procesar.
  6. El texto del cuerpo se registra en la consola para su análisis.

Si estás usando JSON.parse()

Usa este método si el código que genera el error es similar a este:

JSON.parse(data);

En este caso, si se produce un error, puedes registrar los datos en la consola para ver su contenido:

try {
    JSON.parse(data);
}
catch (error) {
    console.log('Error parsing JSON:', error, data);
}

¿Qué debo hacer a continuación?

Cuando puedas ver los datos que están causando el error de análisis de JSON, tal vez obtengas una pista de por qué no estás recibiendo el JSON válido que esperabas. Algunos de los problemas más frecuentes que producen este error son los siguientes: