使用createProxyMiddleware和create react应用程序的动态pathRewrite

Question

根据https://create-react-app.dev/docs/proxying-api-requests-in-development/，我的Create React应用程序中包含以下内容

src/setupProxy.js

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

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

这可以很好地工作，并将所有请求发送到我在端口5000上运行的nodejs应用程序。但是，我希望以某种方式截取请求，并将路径重写为url查询字符串格式。

我在nodejs服务器上运行了json-server，它需要使用这种格式的/api/cheeses?cheeseno=12对请求进行不同的格式化

例如

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

我在这个页面https://www.npmjs.com/package/http-proxy-middleware上遇到了pathRewrite和router，但我不知道如何将它们映射到一起。

稍后随着我的深入，我将需要将嵌套路径路由映射到url查询。

所以

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

谢谢

Answer 1

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是关键

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