react配置API请求代理

需求
当请求http://10.1.1.1:3131/v1/*接口时，需要代理到8181端口。

如果只需要代理匹配到 /v1 路径的请求，可以在 package.json 中使用 http-proxy-middleware 进行自定义代理配置。以下是一个示例：

首先，确保已经安装了 http-proxy-middleware 包。如果没有安装，可以使用以下命令进行安装：

npm install http-proxy-middleware --save

然后，在 src 目录下创建一个名为 setupProxy.js 的文件，并将以下代码添加到文件中：

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

module.exports = function (app) {
  app.use(
    '/v1',
    createProxyMiddleware({
      target: 'http://10.1.1.1:8181',
      changeOrigin: true,
    })
  );
};

在上述示例中，我们使用 createProxyMiddleware 函数创建一个代理中间件，并将其应用到路径为 /v1 的请求上。target 参数指定了代理的目标服务器地址。

最后，启动开发服务器时，setupProxy.js 文件将被自动加载，并且所有以 /v1 开头的请求将被代理到 http://10.31.14.83:8181。

请确保修改目标服务器地址和路径匹配规则，以适应你的实际需求。完成上述步骤后，重新启动开发服务器，代理配置将生效。

这种配置方法允许你更加灵活地定义代理规则，只代理特定的路径，而不是全局代理所有请求。

还有一种配置代理的方式
在项目的根目录下找到 package.json 文件，然后在其中添加一个 proxy 字段，用来指定代理的目标服务器。例如，你可以将以下代码添加到 package.json 文件中：

{
  "name": "my-react-app",
  "version": "0.1.0",
  "proxy": "http://10.1.1.1:8181",
  // 其他配置...
}

箴言：因为这些东西是非常简单的。不要抱怨自己学不会，那是因为你没有足够用心。