Why does fetch in javascript return net::ERR_FAILED in every case?

Question

I'm trying to ask an API with the fetch command:

    fetch('http://fr1.api.radio-browser.info/json/tags');

and chrome keep answer me :

net::ERR_FAILED

TypeError: Failed to fetch

I don't understand what's wrong with this simple code. Can anyone help me ?

Thanks

Answer 1

If you catch the error after calling fetch, you should see a more descriptive error:

// HTTP
fetch('http://fr1.api.radio-browser.info/json/tags')
    .catch(console.error);

Mixed Content: The page at 'https://fr1.api.radio-browser.info/json/tags' was loaded over HTTPS, but requested an insecure resource 'http://fr1.api.radio-browser.info/json/tags'. This request has been blocked; the content must be served over HTTPS.

Try fetching using https:

// HTTPS
fetch('https://fr1.api.radio-browser.info/json/tags')
    .then(res => res.json())
    .then(console.log)
    .catch(console.error);