How to Make http-proxy-middleware Connect to Localhost Server from create-react-app

When developing modern web applications with Create React App (CRA), you’ll often need to connect your frontend to a backend server running locally. However, due to browser security restrictions, specifically the Same-Origin Policy, your React app might face difficulties communicating with a server on a different port. This is where http-proxy-middleware comes to the rescue, acting as a helpful bridge during development.

The Local Development Challenge: CORS

Imagine your React app running on localhost:3000 needs to fetch data from your backend API on localhost:5000. Browsers, for security reasons, block requests between different origins (protocol, domain, or port). This is known as Cross-Origin Resource Sharing (CORS), and it can lead to frustrating errors during development.

Enter http-proxy-middleware

http-proxy-middleware is a handy Node.js package designed to simplify proxying HTTP requests in your development environment. It essentially acts as an intermediary, forwarding requests from your CRA development server to your backend server. This makes it appear to the browser that both the frontend and backend are running on the same origin, thus bypassing CORS issues during development.

Setting Up the Proxy in Your CRA Project

• Install the package:
  npm install http-proxy-middleware --save
• Create src/setupProxy.js: Inside your project’s src folder, create a new file named setupProxy.js.
• Basic Configuration: Open setupProxy.js and add the following, adjusting the target to your backend server’s address:

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api', // Requests to /api will be proxied
    createProxyMiddleware({
      target: 'http://localhost:5000', // Your backend server URL
      changeOrigin: true, // Recommended for localhost
    })
  );
};

In this example, any request from your React app to an endpoint starting with /api (like /api/users) will be automatically forwarded to your backend server running at http://localhost:5000. The changeOrigin: true option is often necessary when dealing with localhost servers.

Key Configuration Options

• target: This is the address of your backend server that you want to proxy requests to.
• changeOrigin: Setting this to true modifies the Origin header in the forwarded request to match the target URL. This can be crucial for avoiding issues with some backend configurations on localhost.

Project Structure:

For optimal integration and to prevent potential conflicts, consider separating your frontend and backend code into distinct top-level folders.

Recommended Folder Structure:

├── api1/ (Backend Server Folder)
│ └── server1.js
└── reactapp/ (Create React App Folder)
└── src
└── setupProxy.js

By placing the backend code in a separate folder (e.g., api1) from your Create React App (e.g., reactapp), you ensure a clearer separation of concerns.

Example reactapp/src/setupProxy.js:

const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
  app.use(
    "/api1",
    createProxyMiddleware({
      target: "http://localhost:3080",
      changeOrigin: true,
    })
  );
};

This setupProxy.js within the reactapp/src directory correctly directs requests to the backend server running on the specified target (e.g., http://localhost:3080). This separation helps avoid potential issues and ensures the proxy functions as expected when connecting to local backend servers.

In Conclusion

HTTP-proxy-middleware is a valuable tool for React developers working with local backend servers. It simplifies the development process by handling CORS issues and allowing your front end to communicate seamlessly with your backend during development. You can establish a smooth and efficient local development environment by correctly configuring setupProxy.js and adopting a clear project structure with separate top-level folders for your front end and back end.

Also Read:

React Performance