react配置API请求代理

Posted 2023-06-02 北风几吹夏

需求
当请求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",
  // 其他配置...

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

React配置代理

参考技术A

俩点注，以下配置方法等同：
1注：例如后端接口地址是 http://127.0.0.1:5000/searchAllTable ，经过上述配置以后前端访问就变成 http://127.0.0.1:5000/api/searchAllTable ，就是说前端写访问api的时候需要向后端提供的地址加一个/api，然后经过"pathRewrite":"^api": "/"这个属性的重写路径配置，实际访问地址就还是后端提供接口的实际路径 http://127.0.0.1:5000/searchAllTable
2注：注意这个pathRewrite，如果不配置，访问和实际地址就都是 http://127.0.0.1:5000/api/searchAllTable ，后端访问接口地址也是这样的路径，如果配置了，那就注意一下自己重写后的访问地址。

如果配置成这样，启动react项目访问就会有如下的错误：

经过查看源码发现：

这里好像只能使用createProxyMiddleware，于是配置修改如下：

重启项目，问题得到解决！

经过上述的一步步调试，终于跨域问题得到解决，心累。。。
在配置代理的过程中，发生拒绝连接请求，我一直以为setupProxy.js与我项目中的config-overrides.js(一个按需导入antd组件库的配置文件)发生冲突，于是我把代理配置也尝试的配到config-overrides.js中，结果，项目是正常了，跨域还是没有解决，于是就到处出找资料查阅，终于啊，皇天不负有心人，问题得到了解决，我的心灵得到升华....