Come correggere SyntaxError: Token imprevisto < in JSON alla posizione 0

Il SyntaxError: l'errore Token imprevisto < in JSON alla posizione 0 indica che il codice JavaScript ha ricevuto dati non JSON, in genere HTML, anziché i JSON previsti. Per risolvere il problema, esamina i dati ricevuti per individuarne la causa. Se usi fetch() o JSON.parse(), registra i dati nella console e verifica gli errori comuni, come URL errati, errori del server o problemi di assegnazione di variabili e codifica dei caratteri.

Questa guida ti aiuterà a correggere l'errore di sintassi SyntaxError: Token imprevisto < in JSON alla posizione 0. La guida si applica inoltre a queste altre varianti comuni dello stesso errore:

Riepilogo

Questi errori indicano che il tuo codice JavaScript si aspettava di ricevere dati JSON, ma ha ricevuto qualcos'altro (probabilmente dati HTML sotto forma di un errore lato server). Per correggere l'errore, devi innanzitutto determinare la causa esaminando che cosa hai ricevuto al posto dei dati JSON.

Dettagli

In genere questo errore viene causato quando il tuo server restituisce dati HTML (che in genere iniziano con <DOCTYPE html> o <html>) anziché JSON. Dato che il codice JSON non può iniziare con un carattere <, l'analizzatore JSON capisce immediatamente che non si tratta di dati JSON validi e genera i messaggi di errore sopra menzionati.

Per correggere l'errore, devi determinare perché ricevi dati HTML (o qualcos'altro) anziché i dati JSON previsti. A tal fine, devi registrare sulla console i dati che cerchi di analizzare.

Se utilizzi fetch()

Utilizza questo approccio se il tuo codice è simile a questo:

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

In questo caso, l'errore viene generato quando response.json() non riesce ad analizzare i dati del server come JSON durante l'esecuzione. Puoi aggiungere una funzione per gestire l'errore e visualizzare il testo grezzo del corpo della risposta del server per poi registrarlo sulla console (vedi le note sulle righe di commento riportate di seguito):

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

Di seguito riportiamo la spiegazione di ogni riga con un commento numerato:

  1. Una variabile responseClone è necessaria per conservare un clone dell'oggetto response, in quanto il corpo di un oggetto response può essere letto solo una volta. Quando viene chiamato response.json(), viene letto il corpo dell'oggetto response originale, il che significa che non può essere letto di nuovo durante la gestione dell'errore di analisi JSON. La clonazione dell'oggetto response nella variabile responseClone genera due copie del corpo della risposta: quella nell'oggetto response originale da utilizzare con response.json() e l'altra da utilizzare con responseClone.text() in caso di mancata esecuzione di response.json().
  2. Questa riga inserisce nella variabile responseClone un clone della risposta ricevuta dal server.
  3. Viene specificato un secondo argomento nella funzione then() che segue alla chiamata response.json(). Questa seconda funzione viene chiamata se viene rifiutata la promessa di response.json() (ovvero viene generato un errore JSON).
  4. La riga registra il valore rejectionReason della promessa response.json() rifiutata e della variabile responseClone per poterle esaminare se necessario (il codice di stato HTTP spesso è utile per il debugging).
  5. Anziché essere analizzato come testo in formato JSON, il corpo della risposta del server viene elaborato come testo grezzo.
  6. Il testo del corpo viene registrato sulla console per essere esaminato.

Se utilizzi JSON.parse()

Utilizza questo metodo se il codice che genera l'errore è simile a questo:

JSON.parse(data);

In questo caso, se si verifica un errore, puoi registrare i dati sulla console per vedere che cosa contiene:

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

Che cosa devo fare adesso?

Una volta che hai identificato i dati che causano l'errore di analisi JSON, dovresti capire perché non ricevi i dati JSON validi previsti. Alcuni dei problemi più frequenti che generano questo errore sono: