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

Question

我正在使用reactjs（ create-react-app ）创建一个仪表板应用程序，在我的应用程序中，我正在调用多个主机（ 为此，我在package.json中配置了多个代理以避免CORS ）。 例如， 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页面上，尽管出现以下错误，请在此处输入图像描述

谁能帮忙..

Answer 1

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

之所以创建它，是因为通常在开发中，react由仅用webpack-dev-server目的的独立服务器提供服务（因此， webpack-dev-server ）。 在生产中，通常有一个后端（节点？ruby？php？）为页面提供服务，并且每次调用都将到达具有相同主机名的某个端点。

例：

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

在您的生产环境中，您有一台服务器（可能是nginx？），它将所有/api调用转发到您的节点进程，并且对于其他所有服务，它都服务于您的react主index.html文件（因此您可以使用react-router ，例如）。 在这种情况下，只要您请求/api/user ，它将由您的Web服务器处理并正确路由。