代理錯誤：無法代理請求/用戶從 localhost:3000 到 http://localhost:5000/

Question

我正在嘗試為后端創建一個帶有 node/express 的簡單反應應用程序。 當我啟動我的應用程序時，出現此錯誤：

Proxy error: Could not proxy request /users from localhost:3000 to http://localhost:5000/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

我的前端 package.json 看起來像這樣

前端非常簡單。 fetchUserData()下的useEffect()是調用后端的。

import React, { useEffect, useState } from "react";

function App() {
  let [userData, setUserData] = useState([{}]);

  useEffect(() => {
    const fetchUserData = async () => {
      const response = await fetch(`/users`);
      const data = await response.json();
      setUserData(data);
    };

    fetchUserData();
  }, []);

  return (
    <div>
      <h1>Hello React World!</h1>
    </div>
  );
}

export default App;

后端非常准系統，因為我剛剛開始這個項目。 如果我直接從瀏覽器請求 http://localhost:5000/users 或 postman，我得到正確的響應沒有問題：

const express = require("express");
const app = express();
const port = process.env.PORT || 5000;

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.get("/users", (req, res) => {
  console.log(req);
  res.json({ users: ["Bob", "Sally"] });
});

app.listen(port, () => {
  console.log(`Listening on port ${port}`);
});

當我嘗試在 http://localhost:3000 上加載前端時出現錯誤消息，然后應該獲取后端資源。 我查看了 chrome 的 .network 選項卡，出於某種原因它將端口 3000 而不是 5000：

我試過以下但沒有運氣：

1. 關閉我的應用程序。 刪除 package-lock.json 和 node_modules，重新安裝它們。
2. 在 package.json 中的“代理”設置的字符串末尾添加“/”
3. 在 package.json 中將 localhost 替換為 127.0.0.1
4. 嘗試在服務器 package.json 中的開發腳本中添加“--ignore client”
5. 嘗試在客戶端 package.json 中添加 "secure": false

編輯 1：這個問題讓我發瘋。 如果我從 package.json 中刪除代理，將 cors 添加到服務器端，並在我的客戶端獲取請求中使用端點的絕對路徑而不是相對路徑，它就可以工作。 但我更願意使用相對路徑。

import React, { useEffect, useState } from "react";

function App() {
  let [userData, setUserData] = useState([{}]);

  useEffect(() => {
    const fetchUserData = async () => {
      const response = await fetch(`http://localhost:5000/users`);
      const data = await response.json();
      setUserData(data);
    };

    fetchUserData();
  }, []);

  return (
    <div>
      <h1>Hello React World!</h1>
    </div>
  );
}

export default App;

Answer 1

通過嘗試復制您的問題，我認為在您的代理中您有“代理”：“http://localhost:5000/”，但隨后您還傳遞了“/users”的獲取請求，這將導致“http:/ /本地主機：5000 //用戶。

我想當你試圖弄清楚問題是你在更改 package.json 以包含代理后沒有重新啟動你的 React 應用程序時，然后當你重新啟動 React 應用程序時，你已經添加了額外的“/”。

同樣在您的瀏覽器 console.log 中，無論您的代理在哪里，它都會提供 http://localhost:3000 作為地址而不是您的實際端點 - 這可能有點像紅鯡魚

希望能幫助到你

Answer 2

我終於讓它工作了！

經過大量的實驗，我意識到這確實是一個環境問題。 這解釋了很多，因為我嘗試的許多其他建議對其他人有效，但對我無效。

發生的事情是我的客戶端使用 wsl 作為終端，而我的后端使用的是 PowerShell。 當我將兩者都切換到wsl時，它起作用了。 或者當我將兩者都切換到 Powershell 時，它也可以工作。

Answer 3

只是不要使用“本地主機”。 將所有內容設為 127.0.0.1

字體：嘗試各種可能的解決方案的時間。