如何在 React 中使用两个不同的 API？

Question

我需要在 API 中测试一个端点，但我已经使用了一个 API，而且我不想更改所有仅针对新 API 的调用。

我不知道事件是否可能，但是有没有办法在proxy里面定义多个package.json？

有什么方法可以在里面传递身份验证密钥package.json吗？

主服务器，是一个本地服务器，带有一个代理：

"proxy": {
    "/api": {
      "target": "http://localhost:3001/proxy",
      "changeOrigin": true,
      "pathRewrite": {
        "^/api": ""
      }
    }
  },

目前我正在使用axiosAPI 调用，并且该项目是从react-create-app.

Answer 1

在package.json中，您可以配置代理服务器，根据不同API请求的模式进行匹配，向不同目标发出API请求，如下所示。

注意事项：

• API 模式的顺序很重要，通用请求 (*) 必须位于最后。
• 正则表达式应该匹配完整的 url，部分匹配会给我带来错误。

下面的代码对我有用。有 3 台不同的服务器，一台用于报告请求，一台用于访问控制请求，其余所有请求都应发送到第三台服务器。

"proxy": {
    "/report/.*(_get)": {
      "target": "http://localhost:8093/"
    },
    "/access/.*(_get)": {
      "target": "http://localhost:8091/"
    },
    "/.*": {
      "target": "https://egov-micro-dev.egovernments.org/",
      "changeOrigin": true
    }
  },

希望这可以帮助。

Answer 2

我找到了在第一个代理之后添加第二个代理的解决方案，在里面，proxy我也没有必要将标头放在里面package.json，但是@Chase DeAnda共享的链接非常有趣，并且可以帮助感兴趣的人： Webpack标头和axios拦截器。