Los errores SyntaxError: Token inesperado < en JSON en posición 0 indican que una solicitud HTTP esperaba una respuesta JSON, pero en su lugar recibió datos no JSON.

Suponiendo que tienes acceso al código que envía la solicitud, investiga y depura más añadiendo lógica de manejo de errores que registre el error y los datos de respuesta en la consola. El enfoque de registro depende de si el código JavaScript utiliza fetch() o JSON.parse().

---

En este artículo se aborda la orientación de resolución de problemas para los errores Error de sintaxis: Token inesperado < en JSON en posición 0 y las siguientes variantes comunes:

• Los errores SyntaxError: La cadena no coincide con el patrón esperado
• Los errores SyntaxError: JSON.parse: carácter inesperado en la línea 1 columna 1 de los datos JSON
• Error de JSON.parse: Token no reconocido '<'

¿Cuál es la causa de este error?

Este error se produce cuando una solicitud espera una respuesta JSON, pero la respuesta real está en un formato diferente. El analizador JSON lanza un error cuando detecta una respuesta no válida.

Las posibles causas de este error incluyen las siguientes:

• URL de solicitud incorrecta
• El encabezado Content-Type no está configurado como application/json
• Problemas de asignación de variables o de codificación de caracteres
• Errores del lado del servidor
• JSON con formato incorrecto

En muchos casos, la respuesta inesperada es HTML o XML que contiene detalles de un error del lado del servidor.

¿Cómo puedo arreglarlo?

Añade el código de manejo de errores y registra los datos de error y respuesta en la consola para investigar por qué no se ha recibido un JSON válido. La forma en que se registran los datos depende de si el código utiliza fetch() o JSON.parse().

Las causas más comunes y sus soluciones incluyen las siguientes:

• La respuesta fue HTML con un código de estado 500: examina los registros de errores del servidor en busca de errores del lado del servidor.
• La respuesta fue HTML con un código de estado 404: comprueba que la URL pasada a fetch() sea correcta.
• La respuesta estaba en blanco o era una cadena de caracteres inusual: comprueba las asignaciones de variables y las codificaciones de caracteres.

Registrar datos de respuesta de fetch()

Una función fetch() de JavaScript puede tener un aspecto similar a este:

El error se produce cuando se llama a response.json() y los datos no se pueden convertir en JSON. Por ejemplo, la respuesta podría ser HTML o XML.

Imprime los datos en la consola creando un clon de la respuesta y añadiendo una función para manejar el error:

Un objeto response solo puede leerse una vez. Por lo tanto, queremos hacer un clon del mismo para imprimirlo en la consola antes de que se lea la respuesta original en la Línea 5.

En la Línea 8, hemos añadido una función de manejo de errores. Si response.json() falla, se llama a esta función y registra el error y los datos de responseClone en la consola para su posterior análisis.

Registrar datos de respuesta de JSON.parse()

Si el código utiliza JSON.parse(data), registra los datos de respuesta en la consola añadiendo un enunciado try…catch para manejar el error: