[英]proxy not working for create-react-app in production
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 ). 我正在使用reactjs( create-react-app )创建一个仪表板应用程序,在我的应用程序中,我正在调用多个主机( 为此,我在package.json中配置了多个代理以避免CORS )。 ex- www.app.demo1.com, www.app.demo2.com, www.app.demo3.com...
例如, 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(){}
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. 开发中:向/ demo1 / api /发出请求时,它已被代理到www.app.demo1.com/demo1/api,并且我得到响应。 but
但
in production: I have deployed the application on github pages, although I am getting the below error, enter image description here 在生产中:我已将应用程序部署在github页面上,尽管出现以下错误,请在此处输入图像描述
Can anybody help.. 谁能帮忙..
Proxies are for development purposes only, and they are handled by webpack-dev-server
. 代理仅用于开发目的,由
webpack-dev-server
。 On production you need to make the calls to the actual host. 在生产中,您需要调用实际的主机。
This is created because usually, on development, react is served by a standalone server meant just for that (hence, webpack-dev-server
). 之所以创建它,是因为通常在开发中,react由仅用
webpack-dev-server
目的的独立服务器提供服务(因此, 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. 在生产中,通常有一个后端(节点?ruby?php?)为页面提供服务,并且每次调用都将到达具有相同主机名的某个端点。
Example: 例:
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. 在您的开发环境中,您有一个节点服务器运行在端口3001上,而您的react代码运行在端口3000上。当react获取
/api/user
,您实际上需要http://localhost:3001/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). 在您的生产环境中,您有一台服务器(可能是nginx?),它将所有
/api
调用转发到您的节点进程,并且对于其他所有服务,它都服务于您的react主index.html
文件(因此您可以使用react-router
,例如)。 In this case, whenever you request /api/user
, this is going to be handled by your web server and routed properly. 在这种情况下,只要您请求
/api/user
,它将由您的Web服务器处理并正确路由。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.