Proxy Servers and Using Proxy Middleware in ReactJS

What is a proxy?

A proxy is a server which acts as an ‘intermediary’ between the client sending requests and the server which will be responding to them. They act on behalf of the client to request information from the server.

A Brief History

According to the Wikipedia entry on proxy servers, they were 'devised to add structure and encapsulation to distributed systems'. A distributed system is a system of 'components' which are located on separate computers and which communicate via the transmission of messages to one another. An example of a 'distributed system architecture' is the client-server system.

Encapsulation in networking refers to separation of concerns in the request-response process. In this case, a proxy helps separate the concern of communicating directly with a server from the client-side, abstracting away the complexity of that task into its own module.

Why Use Proxies?

Proxies have many uses and are integral to network communication. One of the uses of proxies is as additional processing middleware to modify requests and responses. Many times this can help simplify the request being sent because the proxy will deal with sending information to the server that would normally have to be sent in the client's request.
Frequently, they are used to avoid blockages by the CORS policy. A request that otherwise might be rejected based on cross-origin policy may be accepted via a proxy.
Another practical use is in the development process when the client-side files and the server-side files might be served on different ports, and need a proxy in order to communicate. In this case, the proxy will route the request from the client-side to the appropriate back-end URL in order to hit the server. In particular, this configuration is frequently found in applications using create-react-app. Let’s take a look at exactly where they would be found in a react application using an express server.

A React App Proxy

In create-react-app, the client-side files are contained in the ‘src’ folder.
They make requests to the react-app dev server running at the default PORT 3000, or another PORT if specified. However, our files containing request handlers are being served at a different port, in this case 8080. In the bottom of the src folder, just underneath components, we can see the setupProxy folder. When serving the client-side files, the front-end server running on PORT 3000 will need a proxy in order to actually communicate with the express server we have running on 8080. Let’s take a look at the setupProxy file.

First we require dotenv, and set the SERVER_PORT from process.env. This is the port that the express server is listening on and the port we want our proxy to redirect to.

require('dotenv').config();

const { SERVER_PORT } = process.env || 8000;

Then we require 'http-proxy-middleware' and import the middleware function createProxyMiddleware.


const { createProxyMiddleware } = require('http-proxy-middleware');

Now we use it to proxy all requests from the server serving the react files to our SERVER_PORT, which is our express server running on 8080 which will handle the requests. The function takes a route as its first argument which corresponds to a specific route in the express back-end server. It takes an object as the second argument which here contains the target url where the server is listening.

module.exports = (app) => {
  app.use(createProxyMiddleware('/auth', {
    target: `http://localhost:${SERVER_PORT}`,
    })
  );

  app.use(createProxyMiddleware('/notify', {
    target: `http://localhost:${SERVER_PORT}`,
  }));

  app.use(createProxyMiddleware('/route', {
    target: `http://localhost:${SERVER_PORT}`,
  }));

  app.use(createProxyMiddleware('/park', {
    target: `http://localhost:${SERVER_PORT}`,
  }));
};

Now we have successfully created proxies that will route us to the express server, listening on SERVER_PORT which is handling the routes '/auth', '/notify', '/route', and '/park'. Notice that although we define these middleware instances in a module.exports statement, they do not need to be imported anywhere. As long as they are in the 'src' folder they will be found.