Question

我正在使用reactjs（ create-react-app ）创建仪表板应用程序，在我的应用程序中，我正在调用多个主机（为此，我已在程序包中配置了多个代理）。 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页面上，尽管出现以下错误， 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，它指向您的节点服务器。

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

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

1 个答案: