CODEWITHSUNDEEP
reactjsgithub-pagessame-origin-policy
Nicholas Hrboka
Nicholas Hrboka

Reputation: 177

Create React App Allow Access Control Origin Issue

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.

Upvotes: 1

Views: 4208

Answers (2)

Sivadass N
Sivadass N

Reputation: 927

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.

Upvotes: 0

Alaa Masoud
Alaa Masoud

Reputation: 7135

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.

Upvotes: 2

Related Questions