jsc42 jsc42 - 28 days ago 8
React JSX Question

Web API Call in Standalone React App Generating An Error

I have a project that is only a frontend, built with React, in which I am trying to make a call to an external API when an LI is clicked. Here is my code for one of my components. I took out the actual url from this snippet because it is very long, but the call works when using Postman.

getPlayerStats(name) {
fetch(url)
.then(function(response) {
return response.resultSets.rowSet
})
}


This produces this error in my browser console: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Any help on this issue? Most of the info I've read has suggestions for things to do on the backend, but my project does not have a backend. Thanks!

Answer Source

Your problem is that you are loading your app using file://, the browser will not use the CORS policies with file://

You must use a local server like Apache or Nginx to serve your frontend app and load again with localhost, in that case, the request to the API will have the header Origin with value and the server will accept it.

If you are developing frontend apps, it's not a good way to load with file://, use always a local web server.