CODEWITHSUNDEEP
javascriptapireactjs
jsc42
jsc42

Reputation: 117

Web API Call in Standalone React App Generating a CORS 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!

Upvotes: 1

Views: 193

Answers (1)

Kalamarico
Kalamarico

Reputation: 5656

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.

Upvotes: 1

Related Questions