Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON, Getting HTML response instead of JSON

Question

Context: I have been working on a project (called Music Master) on which i have to access details of artist from developer.spotify.com. The following is the code snippet:

const BASE_URL = 'https://api.spotify.com/v1/search?';
    const FETCH_URL = `${BASE_URL}q=${this.state.query}&type=artist&limit=1`;
    console.log('FETCH_URL', FETCH_URL);
    fetch('FETCH_URL', {
        method:'GET',
        headers: {
            'Accept': 'application/json',
            "Content-Type" : "Application/json",
            "Authorization": "Bearer BQDyac2glKnbstiG79UKzKSReNbsWa_hEKlOWAZtXaFZpfx8ZibluRUmBHHO12CjLMJv3KBaKTZqUKJReA11_ItrYIkr3CmnUi6ykUD7J0gZk9pKzxjz02j4byQfSa6s7Y08OMNzugFffYc68tzZiGSDp9vB80eiiIod_igAH8ZxbPBUMsRH3pbiMY8tnJpeXmk"              }
    })
    .then(response => response.json())
    .then(json => {
        const artist = json.artists.items[0];
        console.log('artist', artist);
        this.setState({artist});
    });

When running the code i am getting the above error, i have been researching on this issue for quite a while on the internet and found out that i have to add the header part in the fetch() but even after adding the header part i am getting the error.

I am not able to understand even after passing the token also why am i getting HTML response instead of JSON.

I am really new and this is my first project and hence i am not able to understand what is the internal functioning behind this.

Answer 1

From MDN :

A fetch() promise does not reject on HTTP errors (404, etc.).

It's not ideal to return HTML when you pass an Accept header for json, but errors generally aren't ideal in the first place. You'll probably want to check that the response.status is 200 before trying to parse as JSON.