CORS Anywhere Issue with Ravenous Project

Get Help React.js
#1

Just a heads up, the CORS Anywhere proxy is no longer supported as of January 1st of this year. I built this project a while ago and was revisiting it with 403 errors, did some digging and found some documentation.

cors-anywhere → GitHub - Rob--W/cors-anywhere: CORS Anywhere is a NodeJS reverse proxy which adds CORS headers to the proxied request.
cors-anywhere update / issues → PSA: Public demo server (cors-anywhere.herokuapp.com) will be very limited by January 2021, 31st · Issue #301 · Rob--W/cors-anywhere · GitHub

I’m still trying to figure out the workaround on this, when I do Ill update this comment

Ravenous Part 4 CORS
Ravenous part 4 error
#2

The workaround for this is to visit: https://cors-anywhere.herokuapp.com/corsdemo and click the button to temporarily allow the requests. That way development / testing can continue.

It’s still allowed to be used in development. It was never intended for production use since performing these requests directly from the client’s browser means you’re also exposing the keys that are supposed to remain secret.

Codecademy is also aware of this change and is already preparing to address it in the project.

#3

I’ve had this working in production on my portfolio now for a while since the keys were hidden as an env variable on Netlify. What would you recommend as a workaround to this for keeping the fetch on the Front End? I know I could get it up with a node/express server and that’s what I plan to do when I learn more but for now, are there other proxies that could provide a temporary fix?

EDIT: To clarify I’m aware of the temporary access, I’m just looking for a short term fix I can keep the app running on my portfolio while I set up a server

#4

I don’t have any specific recommendations for other proxy services for you to use until you get your own back-end developed. I suppose you could set up your own instance of CORS Anywhere. The project is open source and provides the instructions for it. In fact, https://cors-anywhere.herokuapp.com was only intended to be a demo of the project anyway. You could deploy it and use it in your projects. With a little digging in the documentation, you may be able to find a way to limit it to just your projects too.

#5

Cool I’ll look into it, thank you

1 Like
#6

I don’t think this it is enough to hide the keys in Netlify env-variables if it’s a regular React app. You could use their Lambda functions as an option without resorting to something like Next.js or proxy-server. Do you have a link to the live project?

#7

https://restaurant-locator.netlify.app/ it’s currently down at the moment but you can find a preview of it on my portfolio (www.coreywademan.com) → projects → restaurant finder

#8

Are you totally sure that it’s a cors-issue causing this problem? My local project of ravenous still works and it also uses cors-anywhere.herokuapp.com. I would check if your api-key is being injected properly in the code on Netlify. I noticed Bearer undefined when looking in dev-tools Network tab-Request headers for your site. I am not sure this is the issue but I would test if it works for you locally when supplying the key directly.

1 Like
#9

Are you storing your api key in the front end or is it hidden? My project was working fine up until about a week and a half ago (last time I checked) and in the issues documentation I believe the cors-anywhere is no longer open proxy so not sure how your app is still working locally unless your using the demo server?

EDIT: I generated a new key and it worked - I don’t know how its still working but :man_shrugging:

1 Like
#10

I just run the project locally on localhost so my api-key is in the JS right next to the function doing the fetching (so front-end). Using Firefox, Dev tools, Network tab, you can view the Authorization request header if you like.

1 Like
#11

The deployed version is still not working when I am accessing it from my computer. Just wanted to let you know in case you are having a different result. The page loads but search does not work. The GET request is resulting in a 403 Error.

#12

I realize that the corsanywhere I am using is different from yours. I am using this one without the hyphen, corsanywhere and not cors-anywhere. So you can try this one if you like as it seems to still be working fine:

https://corsanywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=pizza&location=$dallas&sort_by=rating

Edit: Seems like this (without hyphen) may not be the official version so use it with caution.

4 Likes
#13

Thanks, it works for me too without hyphen while I was getting 403 with it.

1 Like
#14

Much apperciated for your help Mike, thank you

1 Like
#15

I spent over 3 hours debugging my code to find this was the solution. My problem was the console error told me “Uncaught (in promise) SyntaxError: Unexpected token S in JSON at position 0” and I couldn’t figure out what this was coming from. I looked at every line of all my JS and package.json files. I finally used How to fix Unexpected Token in JSON error to print the text to the console and discovered it was the cors throwing the error, not my js. :woman_facepalming:t5:

1 Like
#16

Was just about to post this. corsanywhere without the dash works (https://corsanywhere.herokuapp.com/).

cheers!