生产环境下create-react-app代理无法工作

Question

生产环境下create-react-app代理无法工作

4

我正在使用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页面上，尽管我遇到了以下错误，在此输入图片描述

有人可以帮忙吗..

- Rahul Raj Sonu

你需要添加更多细节，你在生产环境中遇到了什么样的错误？ - lellefood

webpack-dev-server 代理在生产环境中不起作用。请查看完整答案。 - Sergio Moura

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sergio Moura · Accepted Answer

代理只用于开发目的，并且由webpack-dev-server处理。在生产环境中，您需要对实际主机进行调用。

这是因为通常情况下，在开发中，react被一个专门为此而创建的独立服务器提供（因此有了webpack-dev-server）。在生产环境中，通常有一个后端（node？ruby？php？）来提供页面服务，并且每个调用都将指向具有相同主机名的某个端点。

例如：

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

在生产环境中，您将拥有一个服务器（比如nginx），该服务器将所有/api调用转发到您的节点进程，并为其他所有内容提供您的反应主要index.html文件（因此您可以使用react-router，例如）。在这种情况下，无论何时请求/api/user，都将由Web服务器处理并正确路由。