I recently completed the Ravenous project, which makes use of the CORS Anywhere API to bypass CORS restrictions associated with the Yelp API. When I followed the instructions as stated and prepended ‘https://cors-anywhere.herokuapp.com/’ to the URL for the Yelp restaurant endpoint, I kept receiving a message that I was denied access because of Access-Control-Allow-Origin’s setting. I looked into the Cors Anywhere API by typing its URL into my browser and found the following:
“To prevent the use of the proxy for casual browsing, the API requires either the Origin
or the X-Requested-With header to be set.”
I tried setting Origin in the headers object in my fetch request, arbitrarily assigning it a url to my personal website, and that was enough! Ravenous then received results from the Yelp API as expected. But clearly I only got there via a bit of a hack.
One question I have is the following: if I’m running a react app on my personal computer, what should Origin be set to? I think I effectively lied about where the request was coming from by assigning it my website’s url, which was harmless here but seems like generally a bad idea. If it would be preferable to set X-Requested-With instead, what should its value be?
Additionally, why was there a CORS issue with accessing the Yelp API at all? I signed up for an api key, and I would have thought that supplying the key would be enough to access the information. From what I’ve read I think this has something to do with how Yelp’s servers set Access-Control-Allow-Origin, but if I’m an allowed user of the API, why wouldn’t it be set to something where I can access it from my personal computer?
Thanks very much for any insight into any of these questions!