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

Question

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

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

有什么方法可以在 package.json 中传递授权密钥吗？

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

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

目前我正在使用 axios 进行 API 调用，项目是从 react-create-app 开始的。

Answer 1

我找到了在第一个代理之后添加第二个代理的解决方案，在 proxy 内，我没有必要将 headers 也放在 package.json 内，但共享链接@Chase DeAnda 的文章真的很有趣，可以帮助感兴趣的人： Webpack headers and axios interceptors.

Answer 2

在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
    }
  },

希望对您有所帮助。

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

How to work with two different APIs with React?

proxy

reactjs

package.json

react-create-app