How to Deal with CORS Error | Setting Up a Proxy Server in React

If you've built a web app that requires data from a different domain, you're likely familiar with the browser's same-origin policy and CORS. In this article, we'll explore how to bypass CORS issues using the proxying capabilities.

What is CORS - 

CORS stands for Cross-Origin Resource Sharing, and it's a security mechanism that prevents browsers from loading resources from domains other than the one they're currently on. This helps keep malicious code out of web applications, but sometimes legitimate requests get blocked too! 

How to handle this issue -

To handle this issue we use a proxy in our react app. A proxy server acts as an intermediary between a client and a server. It receives requests from clients, forwards them to the appropriate server, and returns the server's response to the client.

1. So, let's say we have our backend hosted on a particular server (https://localhost:5000) and our frontend hosted on a different server(https://localhost:3000).

2. Now, we want to make a request or API call from our front end to this particular API ("https://localhost:5000/api/user). But what happens here is that our browser will not allow us to request a different server URL, due to security reasons and throw a CORS error.

3. So, here we will make use of the proxy server, we will add our backend server URL ("http://localhost:5000") as a proxy field in our package.json file in the front end.

4. And now when we make the request or hit the API calls all the requests will be redirected to our server and we will get the response.

How to handle CORS Error from the backend using Node.js and express.js -

We can use express.js middleware which handles CORS issues from the backend without using proxy.

#backend #coding #webdevelopment