Creating a Proxy Server to Avoid CORS Errors
This week, I spent some time trying to make a little app using a public API to practice my react skills. I just wanted to make a call to this API of professional soccer data and display some of it (simple stuff I was already pretty comfortable doing.) When I used Postman to send my GET request to any desired endpoint within this public API, it behaved as expected. Great, I can now use my app to send the requests, I thought.
Then disaster(!!!!) I tried to send my fetch requests from my React app and all I got was this lousy error message.
Little did I know how much time I was going to spend figuring out what was causing this error and answering the question: what is CORS and why me?
I started Googling. I learned that CORS meant Cross-Origin Resource Sharing, and that, basically, because I was sending my fetch requests from my app at localhost:portnumber and not from another https url, the CORS mechanisms dictated that the API would not permit my request. "Why wouldn't they let me just get the data?" I thought, "They gave me the API key for free, let me use it!"
One of the many stackoverflow pages I came across in my Googling explained part of my error and the reason the proprietor of this API had denied me. Most likely, the reason the API server did not want to accept my request from locally hosted App, is because apparently there is no way to hide the API key I was using in my React App. If the API server had allowed my fetch requests from my React App, they would have been condoning me keeping my API key in a place where any potential users of my React app could find it. Forcing the requests to come from another server (and thus have the right CORS headers), rather than the frontend of my App, is the solution to my CORS error and the API security risk.
"But I don't know how to set up a server to handle this. Do I?" I thought at first. Aaaaaand I was right. I didn't know how to do anything like that. Luckily, I found a YouTube video created by someone who does! So I followed the instructions in the video: in my terminal, I created a new directory for my soon-to-be proxy server, I made a server.js file within that directory, and I installed the following packages.
express (a web framework)
node-fetch (v 2.6.1 importantly; when my first attempts didn't work I found this stackoverflow page explaining that I need an older version to use it the way I want to)
Continuing to follow along with the video explaining how to create this Node.js App, I wrote the code to tell my proxy server to send the fetch request to my desired public API endpoint and show the results on my localhost:3000 address.
And it worked! I never thought an endless string of JSON would be such a beatiful sight.
Stay tuned for part 2 where I figure out how to dynamically change the endpoint of my fetch request based on the conditions in my React App!
