Como resolver Unexpected token < in JSON at position 0
Neste artigo você vai aprender a como resolver Unexpected token < in JSON, um erro que acontece em aplicações JavaScript ao trabalhar com JSON
O erro ‘Unexpected token < in JSON at position 0’ acontece quando o código faz JSON.parse (direto ou via response.json()) numa resposta que na verdade é HTML, e não JSON
O ‘<‘ na posição 0 é o começo de um <!DOCTYPE html> ou <html>
Quase sempre a requisição caiu numa página de erro: URL errada (404), erro no servidor (500), redirecionamento pra tela de login, ou bloqueio de CORS devolvendo HTML
Pra achar a origem, abra a aba Network do navegador e cheque três coisas na resposta que quebrou: o status HTTP, o header Content-Type e o corpo cru com response.text(), antes de tentar o parse
Fala programador(a), beleza? Bora aprender mais sobre JavaScript e JSON!
Neste post pretendo mostrar possíveis soluções para o erro:
“SyntaxError: Unexpected token < in JSON at position 0”
Este erro geralmente ocorre quando há uma tentativa de conversão do JSON para um objeto JavaScript válido
Formação Claude Code
Domine Claude Code do absoluto zero até o avançado
- 118 aulas
- 4 projetos
- 9h 33min
Porém o JSON foi mal formado, ou seja, o método JSON.parse não consegue converter automaticamente
Quando há a presença do caractere < no erro, possivelmente você está recebendo como resposta um HTML e não um JSON
Então verifique os headers das suas requisições, para ver se ele contém a configuração:
Content-Type: application/json
Essa configuração informa que o dado a ser trafegado nas requisições é JSON e não outro tipo, padronizando o request
Outra possibilidade é da própria resposta ser escrita errada, em um JSON inválido
Para isso sugiro que você aprenda mais sobre JSON pois ele possui diversas regras
Toda informação que você precisa pode ser vista neste vídeo:
Em apenas 20 minutos você consegue tirar todas as suas dúvidas sobre o tipo de dado JSON, que é super importante para trabalhar com APIs
Lembre-se sempre de depurar também o que está sendo enviado da API para o front antes da resposta, pois pode ter acontecido algum erro no código e isso prejudicar a resposta
Deixe um comentário contando o que achou deste artigo 🙂
Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:
Conclusão
Neste artigo você viu estratégias de como resolver Unexpected token < in JSON
Não há uma solução exata, pois podem haver diversas causas
Mas entender melhor sobre JSON e também checar os headers das suas requisições pode ajudar a você encontrar o problema e resolver
JSON é um tipo de dado complexo, e muito utilizado neste mundo das APIs, ou seja, importante de se aprender
Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.
Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!
Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!
Uma seção curta chamada ‘Causas mais comuns:’ listando os cenários que fazem o servidor devolver HTML no lugar de JSON: URL errada caindo numa página 404, erro no servidor devolvendo a página HTML de 500, redirecionamento pra tela de login ou autenticação, e bloqueio de CORS retornando HTML. A ideia é o leitor bater o olho e reconhecer o caso dele
Um roteiro prático de depuração usando a aba Network do navegador: primeiro olhar o status HTTP da requisição que quebrou, depois o header Content-Type, e por fim o corpo cru da resposta com response.text() antes de tentar o JSON.parse. Assim tu enxerga se veio um <!DOCTYPE html> no lugar do JSON
Explicar que nas versões atuais do Chrome e Edge (motor V8) a mensagem não aparece mais no formato antigo ‘Unexpected token < in JSON at position 0’, e sim numa redação mais descritiva que já mostra o trecho inválido: SyntaxError: Unexpected token ‘<‘, "<!DOCTYPE "… is not valid JSON. E que a redação muda por navegador: no Firefox é SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data, e no Safari é SyntaxError: JSON Parse error: Unrecognized token ‘<‘. É tudo a mesma causa
Uma seção de Perguntas frequentes (FAQ) respondendo as dúvidas diretas de quem cai nesse erro (o que significa, por que a mensagem está diferente, como achar a resposta real, se configurar Content-Type resolve)
Se liga num caso que pega muita gente que trabalha com autenticação
Quando o token (um JWT, por exemplo) expira ou vem inválido, tem backend que não devolve um 401 limpo em JSON, ele joga um redirect pra tela de login, que é HTML puro
Aí teu fetch pega esse HTML e o Unexpected token < estoura bem na hora do JSON.parse
Se tu guarda o JWT no localStorage e envia em toda requisição, vale conferir se ele não expirou antes de culpar o parse
Antes de mexer no código, abre a aba Network e olha o corpo da requisição que quebrou: se vier um <!DOCTYPE html> de tela de login, o problema é a autenticação e não o teu JSON
Perguntas frequentes
O que significa Unexpected token < in JSON at position 0?
Significa que teu código tentou converter em JSON uma resposta que é HTML
O caractere ‘<‘ da posição 0 é o início de um <!DOCTYPE html> ou <html>, ou seja, o servidor te devolveu uma página e não os dados que tu esperava
Por que meu navegador mostra ‘is not valid JSON’ e não ‘at position 0’?
É o mesmo erro, só mudou a redação
Nas versões atuais do Chrome e Edge (motor V8) a mensagem virou mais descritiva e já mostra o trecho inválido: SyntaxError: Unexpected token ‘<‘, "<!DOCTYPE "… is not valid JSON
No Firefox aparece como SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
E no Safari como SyntaxError: JSON Parse error: Unrecognized token ‘<‘
Quais são as causas mais comuns desse erro?
Na prática são quatro: URL errada que cai numa página 404, erro no servidor devolvendo a página HTML de 500, redirecionamento pra tela de login ou autenticação, e rejeição de CORS retornando HTML
Em todos, o servidor manda HTML e teu JSON.parse não tem o que fazer
Como descobrir o que está vindo na resposta?
Abre a aba Network do navegador e clica na requisição que quebrou
Olha o status HTTP, depois o header Content-Type, e por fim o corpo cru da resposta com response.text()
Se aparecer um <!DOCTYPE html>, tá confirmado: veio HTML no lugar do JSON, e o problema é a requisição, não o parse
Configurar Content-Type: application/json resolve?
Ajuda a padronizar o que TU envia, mas não obriga o servidor a te responder em JSON
Se a resposta continuar vindo como HTML (uma página de erro ou de login), o erro persiste
Por isso o passo mais importante é checar o que o servidor devolveu de verdade na aba Network, e não só o header que tu manda
Leia também
Matheus Battisti
Formações
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
Blog | Mais populares
As diferenças de var, let e const
Como redirecionar para outra página com JavaScript
Exercícios de lógica de programação JavaScript com gabarito
Quais são os melhores exercícios lógica de programação JavaScript? Colocar em prática os exercícios de lógica de programação em JavaScript é de extrema importância para […]
