Fetch get API request using JavaScript failed to showing data in console but works in POSTMAN

Question

I am not getting JSON data in console by requesting this API : https://amlocatapi.us-south.cf.appdomain.cloud/location with using this headers

{
  method:'GET',
  headers:{
    'Authorization':'1q2w3e4r5t6yu7i8',
    'Content-Type':'application/json'
  }
}

<html>
<head></head>
<body>
Hello
</body>
<script>
fetch('https://amlocatapi.us-south.cf.appdomain.cloud/location',
{
  method:'GET',
  headers:{
    'Authorization':'1q2w3e4r5t6yu7i8',
    'Content-Type':'application/json'
  }
}
).then(response => response.json())
.then(json => console.log(json))
.catch(err => console.log(err));
</script>

</html>

If you check dev tools console you see your error: _Access to fetch at from origin 'null' has been blocked by CORS policy_ and also _Unexpected end of input_. Actually that empty object which you are logging is not your result but `console.log(err)`. — Jax-p, May 12 '21 at 11:35
Does this answer your question? [fetch() unexpected end of input](https://stackoverflow.com/questions/45696999/fetch-unexpected-end-of-input) — Jax-p, May 12 '21 at 11:35
It is not solving my problem. If I remove authorization header from the request then It will show Unauthorized in response — muhammad mujtaba, May 12 '21 at 12:09
Well `no-cors` [allows only limited set of headers in the request](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#supplying_request_options) and `Authorization` is not one of them. Basically this is problem of server which you are trying to fetch data from (it has no `Access-Control-Allow-Origin` header) and your browsers problem which doesn't allow resources without that header. You can [check this answer](https://stackoverflow.com/questions/35588699/response-to-preflight-request-doesnt-pass-access-control-check) for more info. — Jax-p, May 12 '21 at 13:47
aren't you simply get a CORS error? something like `Access to fetch at 'https://amlocatapi.us-south.cf.appdomain.cloud/location' from origin '...' has been blocked by CORS policy`... as that works fine from NodeJs using axios — balexandre, May 12 '21 at 21:16

score 0 · Answer 1 · edited May 12 '21 at 20:43

0

Try removing the 'Content-Type': 'application/json' header. Since you are making a GET request you don't need it. And what is the response coming from console? Did you check in the network requests?

edited May 12 '21 at 20:43

bjb568

11,089
11
50
71

answered May 12 '21 at 11:32

mr_nocoding

472
7
16

It is not solving my problem. If I remove authorization header from the request then It will show Unauthorized in response. – muhammad mujtaba May 12 '21 at 12:09
I said content-type not authorization header. What is the response you get back from the server? – mr_nocoding May 12 '21 at 13:20

Fetch get API request using JavaScript failed to showing data in console but works in POSTMAN

1 Answers1