CODEWITHSUNDEEP
javascriptrestfetch-api
0ussamaBernou
0ussamaBernou

Reputation: 79

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

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

Upvotes: 2

Views: 1523

Answers (1)

myf
myf

Reputation: 11273

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

  1. Cross-origin mode: 'no-cors' requests have no access to response body and headers, basically they blindly send data but cannot see the result.

  2. 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>

Upvotes: 1

Related Questions