Error [HPM] Error occurred while trying to proxy request / from localhost:8000 to http://localhost:4000 (ECONNREFUSED)

Question

Developing a Gatsby App using this Starter https://github.com/the-road-to-react-with-firebase/react-gatsby-firebase-authentication

I keep getting this HPM Error after updated my node packages when I try to visit my page after running Gatsby Develop. The project compiles successfully but then I get this error in the browser and nothing shows up.

error occurred while trying to proxy to: localhost:8000/

and this in the terminal:

error [HPM] Error occurred while trying to proxy request / from localhost:8000 to http://localhost:4000 (ECONNREFUSED

once I remove this from the gatsby-config.js file it works and the pages generated in the browser:

module.exports = {
    developMiddleware: app => {
        app.use(
            proxy({
                target: "http://localhost:4000",
            })
        )
    },
}

However, I then get this error in the terminal:

Error loading a result for the page query in "/404.html". The query was not run and no cached result was found. Page not found /404.html

I want to know why isn't the Proxy working and what is the above module exports really doing anyway. I feel like this workaround I'm doing isn't good. Any help or advice would be great!!

Github Repo:

GitHub Repo for The project

Fungosity

Answer 1

That error means there's nothing running at http://localhost:4000. There seems to be a few problem with your setup:

First, your developMiddleware setup points to http://localhost:4000, but your server (server.js) by default runs at http://localhost:3000. Perhaps you forgot to startup the server, or start it up at the wrong port?

Second, if I read it correctly,in your proxy middleware, you're proxying every route to port 4000? This will render Gatsby useless. Here's an example of a better proxy setup:

module.exports = {
  developMiddleware: app => {
    app.use(
      "/api",
      proxy({
        target: "http://localhost:4000",
      })
    )
  },
}

With this, only request to localhost:8000/api will be proxied to localhost:4000.

Hope it helps!

Alceste

Thanks Derek def helped out. I just confused myself when updating my packages and refactoring the code. Server us running and the proxy is working. – Fungosity

Answer 2

Try to replace "localhost" by "127.0.0.1"

Iowa

That actually did it :) For some reason i need to use 127.0.0.1 instead of localhost in proxy.conf.json, nothing else worked, not even uncommenting 127.0.0.1 localhost in "C:\Windows\System32\drivers\etc\hosts" in Windows – Exocrine

The reason is that I only get an IPv6 address from my Internet provider (translation is done by them) so localhost is bound to ::1 via DNS64 – Exocrine

worked for me too, and after it worked, I understood why. Host file needs IP configuration of routing mentioned. In my host file I had changed it few weeks back and I had forgotten about it. Once this solution worked, I realized, went back to host file to revert back the change, and now it works with even localhost:4800 – Tipperary

originally I had localhost with node20 but then I downgraded to node18 and had to change to 127.0.0.1 – Micco

I needed this answer on a non-Gatsby, default VS Angular 16 + NET Core 8 New Project created from Visual Studio, in early 2024. karma.conf.js was being invoked when invoking F5/debug on the default solution and the error stopped when I changed two references to localhost in the karma.conf.js to 127.0.0.1. – Tendance

Answer 3

I did have same error ECONNREFUSED while trying to debug both Angular and Node.js with VS Code and WSL2 Ubuntu-20.04 environment. Apparently that was solved by adding deprecated useWSL flag

{
  "type": "node",
  "request": "launch",
  "name": "Launch Node Express via NPM",
  "runtimeExecutable": "npm",
  "useWSL": true,
  "runtimeArgs": ["run-script", "node:debug"],
  "port": 9229
},

Oriental

Answer 4

I had the same error. In my case, I forgot to run npm run server first. This will start the server.

Then run npm start in another terminal window.

npm start will call "ng serve --proxy-config ./proxy.json"

My proxy.json file:

{
  "/api": {
    "target": "http://localhost:9000",
    "secure": false
  }
}

Alcoholize