如何在 React 应用程序中使用 http-proxy-middleware 重写请求路径？

Question

我在我的 React 应用程序中使用 http-proxy-middleware，我的设置如下：

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

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

我的应用程序的一些 api 请求有请求 url 作为： http://localhost:3000/products-and-details/api/v1/proxy/trend/api/v1/listProducts 我想将其更改为： http://localhost:3000/api/v1/proxy/trend/api/v1/listProducts.

为了实现这一点，我在使用 pathRewrite 将请求发送到目标之前修改请求路径，如下所示：

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

但这似乎不起作用，请求 url 保持不变，没有任何变化。谁能帮忙指出我做错了什么？

编辑： 我的 http-proxy-middleware 依赖的版本是 ^2.0.3

Answer 1

我的资深同事帮我解决了这个问题。似乎请求 http://localhost:3000/products-and-details/api/v1/proxy/trend/api/v1/listProducts 根本没有被代理拦截。因此，为了拦截这些请求，我们必须确保将其包含在我们的代理中间件的 context 中。

因此，就我而言，它如下所述：

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

然后使用 PathRewrite 修改请求路径，然后再向服务器发出实际请求，如下所示：

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

如何在 React 应用程序中使用 http-proxy-middleware 重写请求路径？

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

node.js

create-react-app

http-proxy-middleware