1

In some of projects I encountered in create-react-app people use file setuProxy.js which has content like this inside:

const proxy = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    proxy("/api/mobile-activity/ws", {
      target: "http://localhost:3001/socket.io",
      pathRewrite: { "^/api/mobile-activity/ws": "" },
      ws: true,
    })
  );

  app.use(
    proxy("/api/vehicle-accident-protocols", {
      target: "http://10.1.1.24:7071",
      pathRewrite: { "^/api/vehicle-accident-protocols": "" },
    })
  );
};

I have tried reading about why we need this but most explanations I find online are about how to do this, rarely they explain clearly why we need this. Can someone in easily understandable way explain why we need this file? I am beginner as far as network infrastructure etc is concerned, that's why maybe I am failing to grasp why we need it.

  • 2
    Typically you use a dev proxy to reflect the production deployment topology while still getting the dev server features like hot reloading. If you made requests directly to those other services from the app, then 1. you'd need to have configuration in the app (when in reality it might be provided by service discovery/reverse proxying); and 2. you'd need CORS configuration on those services. – jonrsharpe Nov 16 '21 at 16:50
  • @jonrsharpe since my create react app is served from a different server (the webpack dev server), then I would get CORS error when I made a request to API which was **not** located on webpack dev server is that right? –  Nov 16 '21 at 17:03
  • I'm not going to write a whole answer, no. Honestly at a certain point: if you don't currently need it, why worry about it? – jonrsharpe Nov 16 '21 at 17:03
  • That's _not_ a specific question. – jonrsharpe Nov 16 '21 at 17:04
  • @jonrsharpe This one isn't specific: "@jonrsharpe since my create react app is served from a different server (the webpack dev server), then I would get CORS error when I made a request to API which was not located on webpack dev server is that right? "? –  Nov 16 '21 at 17:06
  • That's a _comment_, that's not the question you've asked. If that's what you want to know, you can easily try that locally and find out. – jonrsharpe Nov 16 '21 at 17:06
  • @jonrsharpe Yeah I was referring to the comment; well ok, I will see if I get more beginner friendly response –  Nov 16 '21 at 17:07

1 Answers1

1

In general, A proxy or proxy server serves as a gateway between your app and the internet. It’s an intermediate server between client and servers by forwarding client requests to resources.

In React, we often use this proxying in the development environment. React uses a create-react-app (webpack dev server) to serve the app in development mode.

Follow this link for more explanations

Roy Christo
  • 354
  • 2
  • 13
  • Ah since my create react app is served from a different server (the webpack dev server), then I would get cors error when I made a request to API **which was not located** on webpack dev server is that right? –  Nov 16 '21 at 17:00
  • 1
    Yes you are right. – Roy Christo Nov 16 '21 at 17:16