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.
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.
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