прокси не работает для создания-реакции-приложения в производстве

Question

Я работаю сactjs ( create-Reaction-app ), чтобы создать приложение панели мониторинга. В моем приложении я вызываю несколько хостов (, для которых я настроил несколько прокси в package.json).чтобы избежать 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"
}
}

в приложении, которое я называю как

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.На производстве вам необходимо выполнить вызовы к фактическому хосту.

Это создается потому, что в процессе разработки реакция обычно выполняется автономным сервером, предназначенным именно для этого (следовательно, webpack-dev-server).На производстве, как правило, есть серверная часть (узел? Ruby? Php?), Которая обслуживает страницы, и каждый сделанный вызов будет происходить к какой-то конечной точке с тем же именем хоста.

Пример:

В вашей среде разработки у вас есть сервер узлов, работающий на порте 3001, и код реакции, работающий на порте 3000. Когда реакция выбирает /api/user, вы на самом деле хотите http://localhost:3001/api/user, который указывает на ваш сервер узлов.

InВ вашей производственной среде у вас есть сервер (nginx, может быть?), который перенаправляет все вызовы /api в ваш процесс узла, а для всего остального он обслуживает ваш главный реагирующий файл index.html (так что вы можете использовать, например, react-router)).В этом случае всякий раз, когда вы запрашиваете /api/user, это будет обрабатываться вашим веб-сервером и правильно маршрутизироваться.