What’s Proxy in React

I am going to answer the questions: 1) What is a proxy? 2) Why do we need a proxy? 3) How to set up a proxy in React?

In this article, I will walk you through the following topics.

1. What is a proxy?
2. Why we need a proxy?
3. How to set up a proxy in a React project?
4. Summary

What is a proxy?

In a computer network, a proxy server is an intermediary between the client and the server. When the client sends a request to the server, a proxy is used to hide the true origin of the request to the resource server.

Client, proxy, and server

In React, implementing a proxy is a good-to-go option when a project includes a backend server and the project runs in the development environment. Let’s see the diagram below. The React part of our app where a user directly interacts with UI is run with the Webpack development server which opens localhost:3000. On the other hand, the backend part of our app is run on localhost:5000. The proxy’s role in this diagram is to redirect a user’s request coming from localhost:3000 to localhost:5000.

Proxy in the development mode of a React project

Why do we need a proxy in React?

The answer is to avoid the CORS (Cross-Origin Resource Sharing) issue. Let me explain. In the diagram above, the client side is connected to the domain localhost:3000. And the request is sent to a different domain which is localhost:5000. In that case, browsers assume that the request includes something malicious. When the browsers detect that the two domain addresses are not the same, they restrict requests.

Cross-Origin Request

For this reason, we need a proxy server to handle the restriction of browsers. A proxy server will deal with requests and responses to make cross-origin communication run smoothly.

How to set up a proxy in a React project?

These are the necessary steps to set up a proxy. I will explain the details in the next paragraph.

1. Download npm package, http-proxy-middleware.
2. Create a setupProxy.js file to create a proxy server in the src directory.
3. Restart your server.

1. Download http-proxy-middleware

We are going to install an npm package, named http-proxy-middleware in a client part of a project. For example, I created a separate directory for the client part (React app) and named it as client.

Move to the client directory as the current location and install the http-proxy-middleware. Make sure not to download the package in the server directory. Then, type the following command line in a terminal.

$ npm install --save-dev http-proxy-middleware

2. Create setupProxy.js in the src directory

Once you installed the package, create a file inside of the src directory and name it as setypProxy.js. There is no need to import this file anywhere. Because Create-React-App looks for a file by this name and loads it.

In the setupProxy.js file, add the following code.

const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
  app.use(
// add the your server routes
    ["/route1", "/route2", "/route3"],
    createProxyMiddleware({
// add the address where your server runs
      target: "http://localhost:5000",
    })
  );
};

3. Restart your server

The proxy will start after you restart the server with the command below.

npm run dev

Summary

That’s it for this post. So here is what we have talked about in the article. A proxy server is an intermediary that sits between the client and the server. In a React app, the role of the proxy is to handle the restriction of browsers with respect to CORS. We can set up a proxy to the React project easily with the npm package, http-proxy-middleware.

More Things To Read

React — How To Proxy To Backend Server

Overview of Proxy Servers and How We Use Them in React