How to rewrite request path using http-proxy-middleware in a react app?

Question

I am using http-proxy-middleware in my react app, where I have a setup like this:

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

module.exports = function(app) {
  app.use(
    "/api/v1",
    createProxyMiddleware({
      target: "https:test.com/",
      changeOrigin: true
    })
  );
};

Some api requests of my applications has request url as: http://localhost:3000/products-and-details/api/v1/proxy/trend/api/v1/listProducts which I want to change it to: http://localhost:3000/api/v1/proxy/trend/api/v1/listProducts.

To achieve this I am modifying request paths before requests are send to the target using pathRewrite as below:

pathRewrite: {
        '^/products-and-details': ''
      }

However this doesn't seem to work and the request url remains the same with no changes. Can anyone please help to point out what am I doing wrong here?

Edit: My http-proxy-middleware dependency has a version ^2.0.3

stackoverflow.com/a/31394321/1808494 "Also make sure to update http-proxy-middleware. pathRewrite functionality was added in version 0.1.0" — Aron
– Aron, Commented Feb 22, 2022 at 1:48
@Aron Please look at the edit for version of http-proxy-middleware — Dragon
– Dragon, Commented Feb 22, 2022 at 1:53

Dragon · Accepted Answer · 2022-02-28 15:57:58Z

0

My senior colleague helped me to fix this. It seemed that the request, http://localhost:3000/products-and-details/api/v1/proxy/trend/api/v1/listProducts was not at all intercepted by the proxy. Hence, to intercept those requests we have to make sure to include it in the context for our proxy middleware.

So, in my case it was as described below:

app.use(["/api/v1", "/products-and-details/api/v1"])

And then use PathRewrite to modify request paths before the actual request is made to server as depicted below:

pathRewrite: {"/products-and-details": ""}

answered Feb 28, 2022 at 15:57

Dragon

1,32418 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to rewrite request path using http-proxy-middleware in a react app?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related