使用 React-Scripts 版本 3.4.1 代理多个 API 请求

Question

我目前使用的是旧版本的 React Script 1.5.1 版。我想升级我的 React 应用程序（react-scripts v 3.4.1），但在这样做时我破坏了我 package.json.

中定义的代理结构

我目前的 JSON 有

"proxy": {
  "/ossapi": {
    "target": "http://localhost:8002"
  },
  "/pcp": {
    "target": "http://test.corp.test.com:8004"
  },
  "/ossOps": {
    "target": "http://test.corp.test.com:8085"
  },
  "/ems": {
    "target": "http://test.corp.test.com:8001"
  }
}

即使在升级到新的 React-scripts 版本 3.4.1 之后，我也希望对我的应用程序进行类似的设置，因为我已经进行了大量开发并且不想再次从头开始。当我将 react-scripts 版本更改为最新的稳定版 3.4.1 时，它一直抛出 failed to parse json 错误。

请指教

以下是我得到的错误：

npm ERR! code EJSONPARSE
npm ERR! file /Users/dhrumit.sheth/Documents/Dev/stash/console-app/package.json
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected token } in JSON at position 1438 while parsing near '...git push --tags",
npm ERR! JSON.parse   },
npm ERR! JSON.parse "proxy": [
npm ERR! JSON.parse   "/os...'
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.

Answer 1

"proxy" in package.json 我相信适用于单个端点。对于更高级的配置，您需要在项目根文件夹中创建 setpProxy.js 文件，安装 http-proxy-middleware 并将您的配置放在那里。代码将如下所示。

module.exports = function(app) {
  app.use(
    '/ossapi',
    createProxyMiddleware({
      target: 'http://localhost:8002',
      changeOrigin: true,
    })
  );
  app.use(
    '/pcp',
    createProxyMiddleware({
      target: 'http://test.corp.test.com:8004',
      changeOrigin: true,
    })
  );
};

和休息一样。 documentation 这里。

使用 React-Scripts 版本 3.4.1 代理多个 API 请求

Proxying Multiple API requests with Create React App with React-Scripts version 3.4.1

reactjs

react-scripts

create-react-app