CORS Error when deploying static React.js yelp site on Netlify

Web Development Full-Stack
1

It’s my first attempt to deploy a site to Netlify (have deployed to GitHub Pages before) as part of the Front-End-Engineer course >> Deploy your React App to Netlify.

Links:

The React App is the Ravenous project, from the Create a Front-End App with React skill path. This uses the Yelp API.

The app works on my local machine fine.

On the local machine I use (as instructed in the Ravenous project) a method to temporarily bypass CORS restrictions via https://cors-anywhere.herokuapp.com/corsdemo . It works by visiting the website, pressing a button to be authenticated, and then appending the fetch url with the cors-anywhere url.

My Ravenous project has been deployed to Netlify, however it doesn’t work anymore. I have tried it both with and without the cors-anywhere workaround and in both cases it throws CORS related errors.

Errors

Access to fetch at 'https://api.yelp.com/v3/businesses/search?term=chocolate&location=wollongong&sort_by=best_match' from origin 'https://ravenous-restuarants.netlify.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Yelp.js:6 GET https://api.yelp.com/v3/businesses/search?term=chocolate&location=wollongong&sort_by=best_match net::ERR_FAILED
v	@	Yelp.js:6
value	@	App.js:33
value	@	SearchBar.js:47

(index):1 Uncaught (in promise) TypeError: Failed to fetch
Promise.then (async)		
value	@	App.js:33
value	@	SearchBar.js:47

Previously I had some CORS errors when deploying a different React App to GitHub Pages, and I resolved that… in that case it was a matter of the API I was calling used http and github uses https, which created a conflict… so the resolution was to change the API url to https and be very particular in ensuring all url references used the same.

That doesn’t appear to be the issue here with Ravenous… as Netlify and Yelp are both using https and I have this correct in all urls. I thought the cors-anywhere was to be a temp workaround in development (where local host is http and can cause conflicts with https api ) and wouldn’t be needed once externally hosted.

Any ideas how to resolve this problem? Is it to do with my code, or how Netlify works?

Thanks for your help :slight_smile:

1 Like
2

Update:
Troubleshooting Netlify didn’t seem to help, so I have now deployed to GitHub Pages.

It is working on GitHub, but using the cors-anywhere temporary CORS workaround - which only gives temporary access and has to be reset manually.

Does anyone have know how to resolve CORS issues more permanently?

3

Im having exactly the same issue…
I’ll post here if I find a solution.

4

UPDATE: Found the solution!

In order to fix this I moved the fetch logic to a netlify function and removed the cors anywhere part from the code.
I followed this video guide for creating the function.
I picked the serverless function (Node/go) option.

And in case you dont know how your .toml should look like in the end.
It should look something like this:

[build]
  functions = "functions/"
  publish = "build"

I also moved the API key to an env variable (as mentioned in the video) :slight_smile: .

This is 2 years after the original issue, but I hope it helps someone anyways.
Have a nice day :slight_smile: