javascript - 代理不适用于生产中的 create-react-app

Question

我正在使用 reactjs(create-react-app) 创建仪表板应用程序，在我的应用程序中我正在调用多个主机(为此我在 package.json 中配置了多个代理以避免 CORS)。
ex- www.app.demo1.com, www.app.demo2.com, www.app.demo3.com...

"proxy": {
    "/demo1/api/":{
  "target":"www.app.demo1.com"
},
"/demo2/api/":{
  "target":"www.app.demo2.com"
},
"/demo3/api/":{
  "target":"www.app.demo3.com"
}
}

在应用程序中，我正在调用-

try{
   const host1 = process.env.NODE_ENV === 'production'? 
   'www.app.demo1.com/demo1/api': '/demo1/api/';
   const host2 = process.env.NODE_ENV === 'production'? 
   'www.app.demo2.com/demo2/api': '/demo2/api/';
   const host3 = process.env.NODE_ENV === 'production'? 
  'www.app.demo3.com/demo3/api': '/demo3/api/';
   const resp1 = axios.get(host1)
   const resp2 = axios.get(host2)
   const resp3 = axios.get(host3)
}catch(){}

开发中:向/demo1/api/发出请求时，它被代理到
www.app.demo1.com/demo1/api 我收到了回复。但

在生产中:我已经在 github 页面上部署了应用程序，虽然我收到以下错误，
enter image description here

任何人都可以帮助..

Answer 1

代理仅用于开发目的，由 webpack-dev-server 处理.在生产中，您需要调用实际主机。

这是因为通常在开发中，react 由一个独立的服务器提供服务(因此，webpack-dev-server)。在生产环境中，通常有一个后端(节点？ruby？php？)为页面提供服务，并且每次调用都将发送到具有相同主机名的某个端点。

例子:

在您的开发环境中，您有一个节点服务器在端口 3001 上运行，您的 react 代码在端口 3000 上运行。当 react 获取 /api/user , 你实际上想要 http://localhost:3001/api/user ，它指向您的节点服务器。

在您的生产环境中，您有一个转发所有 /api 的服务器(可能是 nginx？)调用您的节点进程，并为其他一切服务于您的 react 主 index.html文件(例如，您可以使用 react-router )。在这种情况下，每当您请求 /api/user ，这将由您的 Web 服务器处理并正确路由。