代理不适用于生产中的 create-react-app [英] proxy not working for create-react-app in production

问题描述

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

I am working with reactjs(create-react-app) to create a dashboard application, In my application i am calling multiple host (for that I have configured multiple proxies in package.json to avoid 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"
}
}

在应用程序中，我称之为-

in application i am calling like-

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 我收到了回复.但是

in development: when making request to /demo1/api/ it is being proxied to www.app.demo1.com/demo1/api and i am getting the response. but

在生产中:我已经在 github 页面上部署了应用程序，虽然我收到以下错误，在此处输入图片描述

in production: I have deployed the application on github pages, although I am getting the below error, enter image description here

谁能帮忙..

推荐答案

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

Proxies are for development purposes only, and they are handled by webpack-dev-server. On production you need to make the calls to the actual host.

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

This is created because usually, on development, react is served by a standalone server meant just for that (hence, webpack-dev-server). On production, usually there is a backend (node? ruby? php?) that serves the pages and every call made is going to be to some endpoint with the same hostname.

示例:

在您的开发环境中，您的节点服务器运行在 3001 端口，您的 React 代码运行在 3000 端口.当 react 获取 /api/user 时，您实际上需要 http://localhost:3001/api/user，指向你的节点服务器.

In your development environment you have a node server running on port 3001 and your react code running on port 3000. When react fetches /api/user, you actually want http://localhost:3001/api/user, which points to your node server.

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

In your production environment, you have a server (nginx, maybe?) that forwards all /api calls to your node process, and for everything else it serves your react main index.html file (so you can use react-router, for example). In this case, whenever you request /api/user, this is going to be handled by your web server and routed properly.

这篇关于代理不适用于生产中的 create-react-app的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！