Angular HPM localhost error from while trying to proxy request /api/books from localhost:4200 to http://localhost:3333

Question

Been trying for a few hours to get this issue fixed but cant make a post request with this error. At first i was using ng serve but then started using npm start but still got errors.

Error:

[HPM] Error occurred while trying to proxy request /api/books from localhost:4200 to http://localhost:3333 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

My proxy file:

{
  "/api/*": {
    "target": "https://localhost:4200",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

Answer 1

Is this issue with NX Monorepo? If yes, you are just running this command:

ng serve

In a new tab of terminal, also run the command:

ng serve api

Since both servers need to be started.

Answer 2

If you see above issue, most likely the frontend started before the backend. Once you see the backend command prompt up and running, just refresh the Angular App in the browser.

Answer 3

Authentication in my .NET 6 Angular 12 spa web app suddenly stopped working even though I hadn't changed the authentication code. With .NET 6 the web app is initiated through a proxy which was not the way things were with .NET 5 and before. The proxy settings are kept in proxy.conf.js in the ClientApp folder. I had to learn a lot of stuff about how to update those settings in order to have success with my web app.

So all of a sudden, my authentication to WebAPI was no-longer working, and I was getting the [HPM] error described here. In a couple of GitHub Issues that were definitely not .NET Angular issues but were about this same error message, I saw people recommend, with some sort of settings they had (that I did not have) to change their proxy settings from

https://localhost:{port}

to

https://[::1]:{port}

and those answers got a LOT of upvotes. My problem was, I didn't have their configuration settings, I had proxy.conf.js. But I gave it a shot, and amazingly it did solve my issue. The [HPM] error message went away and authentication started working again. I wish I knew why I suddenly had the issue in the first place - I don't understand that - but it did solve it.

Actually in proxy.conf.js the line I had to change was near the top, at line 3 in the file and the end result was:

const target = env.ASPNETCORE_HTTPS_PORT ? `https://[::1]:${env.ASPNETCORE_HTTPS_PORT}` :
    env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split( ';' )[0] : 'http://[::1]:4401';

where that last port number would be different for others. There's more I'd like to understand about all this, but it did solve the problem.

Answer 4

port 4200 is your app running on, isn't it? so then you have to change target url in proxy file to localhost:3300.