代理错误：无法将请求 /users 从 localhost:3000 代理到 http://localhost:5000/

Question

我正在尝试为后端创建一个带有节点/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 ，我可以毫无问题地获得正确的响应：

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 的网络选项卡，由于某种原因，它将端口 3000 而不是 5000：

我已经尝试过以下方法，但没有运气：

1. 关闭我的应用程序。删除 package-lock.json 和 node_modules，然后重新安装它们。
2. 将“/”添加到 package.json 中“代理”设置的字符串末尾
3. 在 package.json 中将 localhost 替换为 127.0.0.1
4. 尝试将“--ignore client”添加到服务器 package.json 中的开发脚本中
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

只是不要使用“本地主机”。将package.json中的代理设置为 127.0.0.1 或后端运行的任何 IP 地址。

字体：尝试各种可能的解决方案的时间。