Fetch an API -> Uncaught (in promise) TypeError: Failed to fetch

Question

i have a problem for fetch a data of an api.. This api -> https://resmush.it/api

My request work on Postman but not on my website i have this error:

Uncaught (in promise) TypeError: Failed to fetch

My code:

const params = {
    method: 'GET',
    mode: 'no-cors',
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json'
    }
};

fetch('http://api.resmush.it/ws.php?img=https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/1200px-Google_Images_2015_logo.svg.png&qlty=50', params)
    .then(reponseBis => reponseBis.json())
    .then(dataBis => console.log(dataBis));

Thank for help !

Answer 1

EDIT It seems this header <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> is causing troubles. The code should work if you remove it

This meta tag will upgrade HTTP to HTTPS , however the API you're using doesn't serve HTTPS

From the docs:

Note that, if the requested resource is not actually available via HTTPS, the request will fail without any fallback to HTTP.

-------

Mixed Content: The page at 'https://www.mywebsite.com/page.php' was loaded over HTTPS, but requested an insecure resource 'http://api.resmush.it/ws.php?img=https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/1200px-Google_Images_2015_logo.svg.png&qlty=50'. This request has been blocked; the content must be served over HTTPS.

The issue is that this link https://upload.wikimedia.org is HTTPS , while http://api.resmush.it is HTTP . Change the resmush url to https:// or change the wikimedia link to http://

---------

Have a look at HTTP Headers

Using no-cors can only be used to POST data to an API not allowing cors. But doing so will return an empty response. The API you gave allows cors, so this is not needed at all.

The Content-Type header should be Accept

const params = {
    method: 'GET',
    headers: {
        'accept': 'application/json'
    }
};

fetch('http://api.resmush.it/ws.php?img=https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/1200px-Google_Images_2015_logo.svg.png&qlty=50', params)
.then(response => response.json())
.then(json => console.log(json))
.catch(e => console.error(e));

{
  "src": "https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/1200px-Google_Images_2015_logo.svg.png",
  "dest": "http://par3.static.resmush.it/a95239e7e37bade3af9ca3b7eabb8f11/1200px-Google_Images_2015_logo.svg.png",
  "src_size": 48597,
  "dest_size": 19545,
  "percent": 60,
  "output": "json",
  "expires": "Thu, 06 Aug 2020 09:52:12 +0200",
  "generator": "reSmush.it rev.2.0.6.20200328"
}

Answer 2

For the test i put the good part of code only:

const params = {
    method: 'GET',
    headers: {
        'accept': 'application/json'
    }
};

fetch('http://api.resmush.it/ws.php?img=https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/1200px-Google_Images_2015_logo.svg.png&qlty=50', params)
    .then(responseBis => responseBis.json())
    .then(json => console.log(json))
    .catch(e => console.error(e.message));

And i have this error: Mixed Content: The page at 'https://www.mywebsite.com/page.php' was loaded over HTTPS, but requested an insecure resource 'http://api.resmush.it/ws.php?img=https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/1200px-Google_Images_2015_logo.svg.png&qlty=50'. This request has been blocked; the content must be served over HTTPS. Mixed Content: The page at 'https://www.mywebsite.com/page.php' was loaded over HTTPS, but requested an insecure resource 'http://api.resmush.it/ws.php?img=https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/1200px-Google_Images_2015_logo.svg.png&qlty=50'. This request has been blocked; the content must be served over HTTPS.

Failed to fetch
(anonymous) @ galerie.js:11
Promise.catch (async)
(anonymous) @ galerie.js:11