Dynamic pathRewrite with createProxyMiddleware and create react app

Question

I have the following in my Create React App as per https://create-react-app.dev/docs/proxying-api-requests-in-development/

src/setupProxy.js

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

This works fine and sends all requests to my nodejs app running on port 5000. However I wish to intercept the request somehow and rewrite the path into a url query string format.

I have json-server running on the nodejs server which needs the requests to be formatted differtently, using this type of format /api/cheeses?cheeseno=12

For example

'/api/cheese/12' => `/api/cheeses?cheeseno=12`

I have come across pathRewrite and router on this page https://www.npmjs.com/package/http-proxy-middleware but I have no idea how to map them over.

Later on as I get mor advanced, I will need to map nested path routes to url queries.

So

/location/{locationId}/aisle/{aisleid}/cheeses => /api/cheeses?locationId=12&aisleid=123`

Thanks

user_332348 · Answer

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

const rewriteFn = function (path, req) {
  return path.replace('/api/foo', '/api/bar');
};

const options = {
  target: 'http://localhost:3000',
  pathRewrite: rewriteFn,
};

const apiProxy = createProxyMiddleware('/api', options);

rewriteFn is the key

https://github.com/chimurai/http-proxy-middleware/blob/master/recipes/pathRewrite.md#custom-rewrite-function

Dynamic pathRewrite with createProxyMiddleware and create react app

1 Answers