empty response from rest api using javascript fetch method (got a Json response on Postman)

Question

Managed to get a JSON response in Postman, but got an empty response in the console, with no errors whatsoever.

here's the code:

function getFetch() {
  const url = `https://fantasy.premierleague.com/api/bootstrap-static/`;

  let requestOptions = {
    method: "GET",
    redirect: "follow",
    mode: 'no-cors',
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET",
    "Access-Control-Allow-Headers": "x-requested-with"
  };

  fetch(
    "https://fantasy.premierleague.com/api/bootstrap-static/",
    requestOptions
  )
    .then((response) => response.text())
    .then((result) => console.log(result))
    .catch((error) => console.log("error", error));
}

P.S: I also get the JSON if I typed the URL in the browser. But not with a fetch

Why are you setting it to no-cors when you're clearly making a cross-origin request to a 3rd party api? — Jared Smith, Jul 21 '22 at 12:26
Does this answer your question? [Trying to use fetch and pass in mode: no-cors](https://stackoverflow.com/questions/43262121/trying-to-use-fetch-and-pass-in-mode-no-cors) — Jared Smith, Jul 21 '22 at 12:27

score 1 · Answer 1 · answered Jul 21 '22 at 12:23

Assuming you are trying that in browser, client-side:

Cross-origin mode: 'no-cors' requests have no access to response body and headers, basically they blindly send data but cannot see the result.
Those Access-Control-… headers are not for the request, but for the server response. If the server responded with them, the response would be readable from all origins. (Provided such requests were not self-restrained by mode: no-cors as describer above.)

You can see that no mater what you fetch, response is always with status: 0 and ok: false:

function runFetch() {
  console.clear();
  fetch(
      url.value, {
        mode: nocors.checked ? 'no-cors' : 'cors'
      },
    )
    .then((response) => {
      console.log('Response status:', response.status, ', OK:', response.ok);
      return response.text()
    })
    .then((result) => console.log("Result: »" + result + "«"))
    .catch((error) => console.log("error", error.message));
}

runFetch()

<label>URL: <input id="url" value="https://fantasy.premierleague.com/api/bootstrap-static/" /></label>
<br><label>no-cors: <input type="checkbox" id="nocors" checked /></label>
<br><button onclick="runFetch()">run</button>

empty response from rest api using javascript fetch method (got a Json response on Postman)

1 Answers1