One problem we often face as frontend developers is dealing with CORS when making API requests.
What is CORS?
CORS (Cross-Origin Resource Sharing) is essentially a mechanism that allows a server to express what other domains can make requests to it. For example, my app could be hosted on
http://domain-a.com, so only requests made from that same domain are allowed. If another app hosted on
http://domain-b.com tried to make a request to
http://domain-a.com, it would fail depending on the CORS policy.
Where does CRA fit in?
While using CRA (create-react-app), I've often run into a situation where I want to test my local changes against another team's API endpoint. I mean, there's only so much mocking you can rely on! By default, CRA runs locally on
http://localhost:3000, so if I try to make an API request out to
http://domain-a.com/users.json, CORS would block it. However, when developing locally, CRA lets us get around this by proxying all unknown requests to a specified domain. This can now help us make sure our frontend code lines up with the backend's responses.
What's the workaround?
All we need to do is add one new field in
package.json. For example:
After you restart your CRA dev server, you should now be free to make requests to
http://domain-a.com/users.json. This will of course only work locally and you should only make requests to a dev API endpoint, not production. That's it!
Want to see more?
I mainly write about real tech topics I face in my everyday life as a Frontend Developer. If this appeals to you then feel free to follow me on Twitter: https://twitter.com/cmacdonnacha
Bye for now 👋