代理不適用於生產中的create-react-app

Question

我正在使用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頁面上，盡管出現以下錯誤，請在此處輸入圖像描述

誰能幫忙..

Answer 1

代理僅用於開發目的，由webpack-dev-server 。 在生產中，您需要調用實際的主機。

之所以創建它，是因為通常在開發中，react由僅用webpack-dev-server目的的獨立服務器提供服務（因此， webpack-dev-server ）。 在生產中，通常有一個后端（節點？ruby？php？）為頁面提供服務，並且每次調用都將到達具有相同主機名的某個端點。

例：

在您的開發環境中，您有一個節點服務器運行在端口3001上，而您的react代碼運行在端口3000上。當react獲取/api/user ，您實際上需要http://localhost:3001/api/user ，它指向您的節點服務器。

在您的生產環境中，您有一台服務器（可能是nginx？），它將所有/api調用轉發到您的節點進程，並且對於其他所有服務，它都服務於您的react主index.html文件（因此您可以使用react-router ，例如）。 在這種情況下，只要您請求/api/user ，它將由您的Web服務器處理並正確路由。