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

Issue

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

enter image description here

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:

enter image description here

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;

Solution

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.

Answered By – SushiCode

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published