Problem fetching external API returning JSON

Question

I'm having issues fetching an external API who should return JSON.

The API doesn't have CORS enabled so I'm trying to use fetch with the option mode: "no-cors". I tried to use jsonp but doesn't work at all.

So here's the piece of code:

fetch(APIURL, {
  mode: "no-cors",
}).then(response => {
  console.log(response)
  return response.json();
}).then(data => {
  console.log(data);
}).catch(err => {
  console.log(err)
});

The catch statement returns this:

SyntaxError: "JSON.parse: unexpected end of data at line 1 column 1 of the JSON data"

Here's the result of console.log(response)

bodyUsed: true
headers: Headers
   <prototype>: HeadersPrototype { append: append(), delete: delete(), get:   get(), … }
ok: false
redirected: false
status: 0
statusText: ""
type: "opaque"
url: ""
<prototype>: ResponsePrototype { clone: clone(), arrayBuffer: arrayBuffer(), blob: blob(), … }

But in the network tab I can see the JSON response that I want to use so I find it weird that I can see it in there so I assume the problem is on my end. I tried validating the JSON output in a validator and it's a valid JSON.

Any Ideas?

If there is no Access-Control-Allow-Origin: * header, you simply can't access it. As far as I know the only options you have are to ask the owner of the API to add your IP / domain or he could set the value to * to allow everyone to access it or you could use an entirely different API which supports CORS. — Sv443
– Sv443, Commented Jan 30, 2019 at 10:29
Is this a public REST API you are trying to call? Seems like a network error. We can try it for you if you can share the API address — Ulug Toprak
– Ulug Toprak, Commented Jan 30, 2019 at 10:34
response is not json, so you cannot use response.json() for the data which is not json structure. — mstfyldz
– mstfyldz, Commented Jan 30, 2019 at 10:43

Quentin · Accepted Answer · 2019-01-30 10:40:05Z

2

Under normal circumstances, you cannot read data from a third party site due to the Same Origin Policy.

CORS allows the third party site to grant your JavaScript permission to read the data.

The no-cors setting is a means for your JavaScript to say "I do not want to do anything that requires permission from CORS". This lets you make a request to send data without being able to read the response (the benefit is that it avoids throwing an error message all over the developer console telling you that you can't read the data you aren't trying to read).

Since you need to read the data, you cannot use no-cors.

Since the site doesn't provide permission with CORS, you cannot read the data directly with client-side code.

Use a proxy.

answered Jan 30, 2019 at 10:40

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bonhomme Over a year ago

Ok That's what I thought, but seeing the JSON in the network tab I really thought I was doing something wrong or I could find a workaround the CORS issue. I'll try to ask see if they can enable CORS for this app. Thanks Quentin

Quentin Over a year ago

@bonhomme — The same origin policy is imposed by the browser. So the data arrives at the browser, but it refuses to share it with the JavaScript.

Collectives™ on Stack Overflow

Problem fetching external API returning JSON

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related