Proxy error: Could not proxy request /users from localhost:3000 to http://localhost:5000/

Question

I am trying to create a simple react app with node/express for the backend. When I start my app I get this error:

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).

My front-end package.json looks like this

The front-end is pretty simple. fetchUserData() under useEffect() is what calls the backend.

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;

The backend is pretty barebone as I just started this project. I have no problem getting the correct response if I just request http://localhost:5000/users directly from the browser or 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}`);
});

The error message appears when I try to load the front end on http://localhost:3000 which should then fetch the backend resource. I look at the network tab of chrome and for some reason it is going to port 3000 instead of 5000:

I've tried the below but no luck:

1. Closing my app. Deleting package-lock.json and node_modules, reinstalling them.
2. Add '/' to the end of the string for the "proxy" setting in package.json
3. Replacing localhost with 127.0.0.1 in package.json
4. Tried adding "--ignore client" to dev script in server package.json
5. Tried adding "secure": false in client package.json

Edit 1: This issue is driving me crazy. If I remove the proxy from package.json, add cors to the server side, and use the absolute path of the endpoint instead of the relative path in my client-side fetch request, it works. But I would much rather use the relative path.

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

Just don't use 'localhost'. Set proxy in package.json as 127.0.0.1 or whatever IP address your backend is running.

Font: hours trying every solution possible.