代理運行節點反應應用程序

Question

我剛剛創建了一個react-node-SQL應用，並且希望它在Google Cloud（而不是firebase）上運行

我的React應用程序在不同的端口上運行，而我的節點應用程序在不同的端口上運行。

我遵循了這篇文章，並在我的react-app package.json中添加了這一行，但是我沒有解決，即按鈕中的href仍將轉到localhost：8081，但是沒有用

我的節點在端口8080上運行，在我的react應用程序的package.json ，我添加了"proxy": "http://localhost:8080/"並在我執行href="/api/status"時添加了按鈕，到運行localhost:8081應用的localhost:8081

現在，是否可以在同一項目下運行兩個節點並做出反應？ 或者我們需要為他們創建一個單獨的項目。

[更新：]我正在使用webpack，在我的webpack配置文件中，我添加了這個

devServer: {
    proxy: {
      '/': 'http://localhost:8080'
    }
  },

出現的問題是，即使在我的應用程序中，在啟動（運行在8081上）打開網頁localhost：8081 /時， 也會引發錯誤，提示無法獲取頁面

但是如果我做這樣的事情

  devServer: {
        proxy: {
          '/api': 'http://localhost:8080'
        }
      },

它會正常打開頁面首頁。 現在我的api和身份驗證后的回調uRL未配置為帶有api前綴。

Answer 1

基本上，當您從react應用發出ajax請求時，例如axios或fetch ，它將使用proxy: <..>作為后端URL。 但是， href不適用於代理。 在這種情況下，您需要使用手動代理頁面中記錄的setupProxy.js手動配置代理。

看看這個問題 ：

同樣的錯誤在這里，它仍然路由到localhost：3000 / api / auth / google，我的CRA版本是2.1.3。看來http-proxy-middleware是唯一的工作方式。 我必須手動配置代理

從反應文檔 ：

如果代理選項對您來說不夠靈活，您可以直接訪問Express應用程序實例並連接自己的代理中間件。

您可以將此功能與package.json中的proxy屬性結合使用，但是建議您將所有邏輯整合到src / setupProxy.js中。