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

From trying to replicate your issue I think in your proxy you have "proxy": "http://localhost:5000/", but then you also pass a fetch request for "/users" which would lead to a "http://localhost:5000//users.

I would imagine that when you were trying to figure this out that the issue was that you didn't restart your React App after changing the package.json to include the Proxy, and then by the time you restarted the React App, you had already added the extra "/".

Also in your browser console.log when, no matter where your proxy is it will come up with http://localhost:3000 as the address rather than your actual endpoint - it can be a bit of a red herring

Hope it helps

Answer 2

I finally got it to work!

After a lot of experimenting, I realized that this was indeed an environment problem. That explains a lot since the many other suggestions I tried worked for other people but not for me.

What had happened was that my client-side was using wsl for the terminal yet my backend was using PowerShell. When I switched both to wsl it worked. Or when I switched both to Powershell it also worked.

Answer 3

Just don't use 'localhost'. Put everything as 127.0.0.1

Font: hours trying every solution possible.