Skip to content
ToolShedby Wasim Shaikh

Angular Proxy Config Generator

Generate proxy.conf.json or .mjs for ng serve: proxy /api to your backend, fix CORS in development, strip prefixes with pathRewrite, set changeOrigin and secure, and test which rule a request hits.

Start from a common setup

Rule 1

Comma-separated. /api/** covers /api and everything under it.

Where the requests really go. Include the port.

Path on the backend

Send the target's host as the Host header. Needed for most remote APIs and virtual hosts.

Only applies to https targets.

Also proxy WebSocket upgrades, e.g. socket.io.

Extra request headers

One Name: value per line. Added to every proxied request. Don't commit real secrets.

File

The format in the Angular docs. Static values only.

Needs the ES module or CommonJS format.

Needs the ES module or CommonJS format.

{
  "/api/**": {
    "target": "http://localhost:3000",
    "changeOrigin": true
  }
}

Save as src/proxy.conf.json, relative to the folder that holds angular.json.

Test a request

Type a URL your app calls with HttpClient to see which rule handles it and where it ends up.

Matched
Rule 1 (/api/**)
Backend path
/api/users/42?active=true
Forwarded to
http://localhost:3000/api/users/42?active=true

How the Angular Dev Server Proxy Works

During development your Angular app runs on http://localhost:4200 and your API somewhere else, so calls from the browser to the API are cross-origin and fail with CORS errors. A proxy file tells ng serve to forward matching requests, such as everything under /api, to your backend. The browser only talks to localhost:4200, and your code uses relative URLs that also work in production.

  1. Add a rule for each path prefix and the backend it should go to, or start from a preset.
  2. Choose the backend path: keep it, remove the prefix, or rewrite it with a regular expression.
  3. Copy or download the file into your project, usually src/proxy.conf.json.
  4. Add proxyConfig to the serve target in angular.json, or run ng serve --proxy-config src/proxy.conf.json, then restart ng serve.

How Proxy Paths Match

Rules are checked from top to bottom and the first match wins, so put specific paths such as /api/auth/** before broad ones such as /api/**.

KeyMatchesDoes not match
/api/**/api, /api/users, /api/users/123/api-docs
/api/*/api/users/api, /api/users/123
/api/api, /api/users/123, and also /api-docs/auth
^/api/v[12]//api/v1/users, /api/v2/orders (regular expression)/api/v3/users

Frequently Asked Questions

Does the proxy fix CORS errors?
In development, yes. Your app calls its own origin (http://localhost:4200/api/...), so the browser never makes a cross-origin request. The dev server forwards the call to the backend from Node, where CORS does not apply. Turn on changeOrigin for remote APIs that check the Host header.
Why does my request still go straight to the backend?
The proxy only sees requests sent to the dev server. Call relative URLs such as this.http.get("/api/users") instead of http://localhost:3000/api/users. Put the full URL only in the proxy target.
Does the proxy work in production?
No. proxyConfig is an option of the dev server that ng serve runs. In production, configure the same routes on your web server or hosting (nginx, Netlify or Firebase rewrites, or a reverse proxy), or serve the app and API from the same origin.
My changes to proxy.conf.json do nothing. Why?
The file is read once when ng serve starts. Stop and restart ng serve after every change. Also check that the path in angular.json (or --proxy-config) points at the file, relative to the workspace root.
When should I remove the prefix with pathRewrite?
When the backend does not have the /api prefix in its routes. With "^/api": "" a call to /api/users reaches the backend as /users. If the backend routes start with /api too, keep the path as it is.
I get ECONNREFUSED or a 504 for localhost. What is wrong?
The backend is not listening at the target. Check that it is running and on that port. If it only listens on IPv4, use http://127.0.0.1:3000 instead of localhost, because Node may resolve localhost to the IPv6 address ::1 first.
JSON or a JavaScript proxy file?
JSON covers fixed targets, rewrites and headers, and the Angular dev server accepts comments in it. Use proxy.conf.mjs (or .cjs) when you need logic: reading targets from environment variables, logging requests, or Vite proxy hooks such as configure and bypass.
Which Angular versions does this work with?
The same proxy.conf.json works with the Vite-based application builder (@angular/build:dev-server, the default since Angular 17) and the older webpack dev server. On the application builder, Angular converts glob keys and pathRewrite into Vite proxy options for you. The rules here were checked against Angular 22.

Sources & Official Resources

Matching, file formats and pathRewrite handling follow the Angular docs and the Angular CLI source. Last reviewed against Angular 22.

Build the matching ng serve command in the Angular CLI Command Builder, or browse all Angular tools.