Create React App Allow Access Control Origin Issue

Question

I deployed a weather app created with create-react-app. In development I would use the chrome extension allow access control origin. Now that it is deployed with github pages, I'm getting the error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://boka44.github.io' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

It seems like I need to add a header to my server, but I'm confused as to how and where to add it.

My code is here: https://github.com/Boka44/weather

Any help would be deeply appreciated.

Alaa Masoud · Accepted Answer · 2017-12-30 08:38:00Z

2

The API endpoint (The one that provides weather information) which you are calling has disabled CORS which means you can never make a client-facing call (i.e. through a browser) because the browser will block the call.

You have 2 options here:

If you can change the API endpoint: you can add a CORS header to allow origins from your client app's domain.
If you cannot change the server code: Create your own API endpoint that calls the original API endpoint and have your client app call your own API. (i.e. You just make a proxy server that directs your calls to the original API endpoint). In this case, you can specify a CORS header on your server to allow calls from your client app domain only.

answered Dec 30, 2017 at 8:38

Alaa Masoud

7,1353 gold badges41 silver badges57 bronze badges

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

2 Comments

Nicholas Hrboka Over a year ago

That's where part of my issue lies. I'm not how to do either of those. I added a proxy server to my package.json but not sure how to set it up. Also unsure on where or how to add the CORS header. Bit of a noob on this one and I can't find good documentation on it.

Alaa Masoud Over a year ago

You need to create a server, you can use Azure, AWS or GCP they all provide free tiers. Just create a nodejs server that calls the API end point. In your client app, you will call the server you just created. See learn.microsoft.com/en-us/azure/cloud-services/… for a tutorial on creating a simple nodejs server on Azure

Sivadass N · Accepted Answer · 2017-12-30 08:43:09Z

0

Dark Sky API docs says that it is not allowing CORS. So you can't get data to your client side code from their server. So create a proxy server in PHP or some other platforms, which will make an api call and produces the JSON formatted response.

answered Dec 30, 2017 at 8:43

Sivadass N

9274 gold badges12 silver badges23 bronze badges

Collectives™ on Stack Overflow

Create React App Allow Access Control Origin Issue

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related