Getting CORS / Origin Error When Calling External API

Question

I have a react app without a backend that is using localhost. In a component, there is an onClick handler which calls an external API to get data. The state is amended to have a piece of state be the return value of the API.

The code for that call:

fetch(statsURL)
    .then(function(response) {
        return response.resultSets.rowSet
    })

This generates the following error:

In the Network details, I do get a 200 OK status code, and here is the header info:

Let me know if you have any suggestions. Thanks

score 0 · Answer 1 · answered Sep 24 '17 at 18:03

0

You can use YQL to request resources that are not served with CORS headers. To get the response from a fetch() call use Response.text(), Response.json(), Response.blob() or Response.arrayBuffer()

fetch(statsURL)
.then(function(response) {
  return response.json()
})
.then(function(data) {
  console.log(data.resultSets.rowSet)
})
.catch(function(err) {
  console.error(err)
})

answered Sep 24 '17 at 18:03

guest271314

1
15
104
177

Thanks for the suggestion. Unfortunately, I added this code to my file, and still get the same error in the console. – jsc42 Sep 24 '17 at 18:19
@jsc42 Are you using YQL to request the resource? – guest271314 Sep 24 '17 at 18:50

Getting CORS / Origin Error When Calling External API

1 Answers1