Como corrigir SyntaxError: Token inesperado < em JSON na posição 0

O erro SyntaxError: Unexpected token < in JSON at position 0 indica que o código JavaScript recebeu dados que não eram em JSON, normalmente em HTML, em vez do JSON esperado. Examine os dados recebidos para determinar o problema e corrigi-lo. Se estiver usando fetch() ou JSON.parse(), registre os dados no console e verifique se há problemas comuns, como URLs incorretos, erros de servidor ou problemas de atribuição de variáveis e codificação de caracteres.

Este guia ajudará você a corrigir SyntaxError: Unexpected token < in JSON at position 0. Este guia também se aplica às seguintes variantes comuns do mesmo erro:

Resumo

Esses erros indicam o código JavaScript que deveria receber o JSON, o que não ocorreu (provavelmente HTML na forma de um erro no servidor). Para corrigir o problema, é preciso examinar o que você recebeu no lugar do JSON esperado para determinar o problema.

Detalhes

Normalmente, esse erro ocorre quando o servidor retorna HTML (que costuma começar com <DOCTYPE html> ou <html>) em vez de JSON. O JSON válido não pode começar com um caractere <. Com isso, o analisador JSON sabe imediatamente que os dados não são JSON válido e gera uma das mensagens de erro mencionadas acima.

Para corrigir o erro, é necessário descobrir por que você está recebendo o HTML (ou algo diferente) em vez do JSON esperado. Para fazer isso, é preciso registrar no console os dados que você está tentando analisar.

Se estiver usando fetch()

Use esta abordagem se o seu código for semelhante ao seguinte:

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

Nesse caso, o erro ocorre quando response.json() tenta executar e falha ao analisar os dados do servidor como JSON. Você pode adicionar uma função para resolver o erro, exibir o texto bruto do corpo de resposta do servidor e registrá-lo no console (veja as observações sobre as linhas comentadas abaixo):

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

Confira uma explicação de cada linha com um comentário numerado:

  1. Uma variável responseClone é necessária para manter um clone do objeto response, porque o corpo de uma response só pode ser lido uma vez. Quando response.json() é chamado, o corpo da response original é lido, o que significa que não pode ser lido novamente ao resolver o erro de análise JSON. A clonagem da response para responseClone gera duas cópias do corpo de resposta com as quais você pode trabalhar: uma na response original para usar com response.json() e outra para usar com responseClone.text() se response.json() falhar.
  2. Essa linha preenche a variável responseClone com um clone da resposta recebida do servidor.
  3. Um segundo argumento de função é passado para a função then() que segue a chamada response.json(). Essa segunda função será chamada se a promessa de response.json() for rejeitada (isto é, um erro JSON for encontrado).
  4. Essa linha registra o rejectionReason da promessa de response.json() rejeitada e o responseClone para que possa ser examinado se for preciso (o código de status HTTP normalmente é útil para depuração, por exemplo).
  5. Em vez de tentar analisar o corpo da resposta do servidor como JSON, ele é processado como texto bruto.
  6. O texto do corpo é registrado no console para exame.

Se estiver usando JSON.parse()

Use este método se o código que estiver apresentando o erro se pareça com o seguinte:

JSON.parse(data);

Nesse caso, se um erro for encontrado, registre os dados no console para ver o conteúdo:

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

O que devo fazer a seguir?

Assim que você vir os dados que estão causando o erro de análise JSON, provavelmente haverá uma sugestão do motivo para você não estar recebendo o JSON válido esperado. Alguns dos problemas mais comuns que geram esse erro são: