Why Do You Need To Use A DevServer Proxy?

There are multiple reasons to use a Proxy Server for development. Let’s look at them one by one.

1. No more CORS errors and need for preflight requests

CORS (Cross-Origin Resource Sharing) error is one of the most annoying things you encounter when developing and testing web applications.

CORS error happens when web browsers enforce the Same-Origin Policy to protect users from Cross-Site Scripting (XSS) attacks and other types of attacks.

This might not be an issue in production since both the frontend and the backend API are typically served from the same origin.

But, in development, you need to add a rule to your Backend CORS policies explicitly allowing the frontend DevServer origin. However, you can skip that by using a DevServer proxy by showing your browser that the backend API is also from the exact origin.

2. Easy handling of HTTP/HTTPS forwarding

The http-proxy-middleware gives the option of forwarding HTTP or HTTPS URLs to a specific path using ProxyTable. The below implementation shows how a ProxyTable can be used to redirect requests to a different target.

For example, requests can be routed using the host HTTP/HTTPS header or the request path.

const proxyTable = {
  'integration.localhost:3000': 'http://localhost:8001',
  'staging.localhost:3000': 'http://localhost:8002',
  '/rest': 'http://localhost:8003',
};const options = {
  target: 'http://localhost:8000',
  router: proxyTable,
};const myProxy = createProxyMiddleware(options);

For example, if you want to plugin your frontend to a remote backend running on HTTPS, you can do that via the Proxy without causing any HTTPS resource access issues.

3. Easy to simulate the production environment

The DevServer Proxy makes it easier to test applications in development before they go live.

For example, assume you have a path change in an API URL and test it before deploying to production. This can be easily accomplished by using the pathRewrite option in http-proxy-middleware.

pathRewrite: {
   '^/api/old-path': '/api/new-path',
},

4. Easy to control error logging

When it comes to determining the source of errors, logging is extremely helpful. Since http-proxy-middleware has different log levels defined, we can use it to control the amount of logging.

The logLevel : 'debug' will show you all the logs.

You can also use the Log Provider attribute in http-proxy-middleware to configure your own logger.

5. Simple to work with relative paths in frontend

You can bring the development environment much closer to production. For instance, your frontend can work with the relative URL of the backend API both in development and production.

The DevServer Proxy will take care of the absolute paths in the development environment. This saves frontend developers time because they no longer need to configure the host part of the URL.

So, let’s look at how we can configure the DevServer Proxy with React.