Web API Call in Standalone React App Generating a CORS error

Question

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!

One question, in your browser are you using an URL like "localhost..." or you are using "file://..." — Kalamarico
– Kalamarico, Commented Sep 24, 2017 at 0:25

Kalamarico · Accepted Answer · 2017-09-24 00:39:05Z

1

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.

edited Sep 24, 2017 at 0:39

answered Sep 24, 2017 at 0:37

Kalamarico

5,71622 gold badges57 silver badges74 bronze badges

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

Collectives™ on Stack Overflow

Web API Call in Standalone React App Generating a CORS error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related