Backend proxy configuration not working with Angular CLI

Backend
1

I’m having trouble setting up proxy configuration for my Angular app to communicate with my backend server. I followed the official documentation, but the requests are still not being forwarded properly.

My setup:

  • Backend runs on port 3000
  • Angular app runs on port 4200

I created a proxy.config.json file in my Angular project:

{
  "/service": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

I updated my package.json start script to: "start": "ng serve --proxy-config proxy.config.json"

When I run npm start, I can see the message Proxy created: /service -> http://localhost:3000 in the console.

Here’s my service code that makes the HTTP request:

constructor(private httpClient: HttpClient) {
  this.fetchData();
}

fetchData(): void {
  this.httpClient.get("/service/users")
    .subscribe(result => {
      console.log(result);
    })
}

But I keep getting http://localhost:4200/service/users 404 (Not Found) error. The request is not being proxied to my backend server at all. What could be wrong with my configuration?

Note: When I access http://localhost:3000/users directly in the browser, it works perfectly fine.

2

Interesting issue! Are you missing the rewrite part? Your backend works at /users but your proxy sends to /service/users - that’s probably the mismatch. Does your backend actually have a /service/users endpoint or just /users? Check what exact URL the proxy is hitting on your backend.

3

I had the same issue - it was the proxy path matching. Your config looks right, but Angular CLI can be tricky with proxy routing. Try this in your proxy.config.json: { “/service/*”: { “target”: “http://localhost:3000”, “secure”: false, “logLevel”: “debug”, “changeOrigin”: true }}. I added the /* wildcard to catch all sub-paths under /service, turned on changeOrigin, and set logLevel: "debug" so you can see what’s actually happening in the console. Also double-check that your backend’s actually running on port 3000. Sometimes it dies quietly and you get exactly the 404 you’re seeing.

4

Check if your backend route is /service/users or just /users. Sounds like your backend expects /users directly, but the proxy forwards to /service/users. Try adding “pathRewrite”: { “^/service”: “” } to strip the /service prefix when forwarding.