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 recibió datos no JSON, generalmente HTML, en lugar del JSON esperado. Para solucionar este problema, examina los datos recibidos a fin de determinar el problema. Si estás utilizando fetch() o JSON.parse(), registra los datos en la consola y verifica problemas comunes como URL incorrectas, errores en el servidor o problemas de asignación de variables y codificación de caracteres.

Esta guía te ayudará a corregir el 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 un error del servidor). Debes examinar lo que recibiste en lugar del JSON esperado para determinar cuál es el problema y solucionarlo.

Detalles

Normalmente, este error se produce cuando el servidor devuelve HTML (que suele empezar con <DOCTYPE html> o <html>) en vez de JSON. Un JSON válido no puede comenzar con un carácter <, por lo que el analizador JSON sabe inmediatamente que los datos no pertenecen a un archivo JSON válido y muestra uno de los errores mencionados anteriormente.

Para corregir este error, necesitas averiguar por qué obtienes HTML (u otro elemento) en lugar del JSON que esperabas. Para ello, debes registrar en la consola los datos que intentas 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 logra analizar los datos del servidor como JSON. Puedes agregar una función para gestionar el error, mostrar el texto sin formato del cuerpo de la respuesta del servidor y registrar esto en la consola (consulta las notas sobre las líneas comentadas debajo):

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 una variable responseClone para conservar una copia del objeto response, ya que el cuerpo de response solo se puede leer una vez. Cuando se llama a response.json(), se lee el cuerpo de response original, lo que significa que no se puede volver a leer cuando se gestiona el error de análisis JSON. Al clonar response a responseClone, se generan dos copias del cuerpo de la respuesta con las que trabajar: una en la instancia de response original para usar con response.json() y otra para usar 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 un 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 de response.json() (es decir, se encuentra un error JSON).
  4. Esta línea registra el valor de rejectionReason de la promesa rechazada response.json() y responseClone para que se analice de ser necesario (por ejemplo, el estado del código HTTP suele usarse para la depuración).
  5. En lugar de intentar analizar el cuerpo de la respuesta del servidor como JSON, se ingresa 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, puedes registrar los datos en la consola si se produce un error para ver el 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 generan el error de análisis de JSON, es posible que obtengas una pista de las razones por las que no obtienes el JSON válido que esperabas. Algunos de los problemas más frecuentes que conducen a este error son los siguientes: