Angular Development Proxy — Eliminating CORS in Local Development

The Angular development proxy eliminates CORS entirely during local development by making the Angular dev server act as a proxy — routing /api/* requests to the ASP.NET Core API. From the browser’s perspective, all requests go to localhost:4200 (the same origin), so no CORS headers are needed. This is simpler than configuring CORS for every developer’s local setup and mirrors production where the reverse proxy (nginx, Azure Front Door) routes requests.

Angular Proxy Configuration #

// ── proxy.conf.json — root of the Angular project ─────────────────────────
{
  "/api": {
    "target": "http://localhost:5000",   // ASP.NET Core API address
    "secure": false,                      // allow self-signed certs in dev
    "changeOrigin": true,                 // rewrite the Origin header
    "logLevel": "debug"                   // log proxied requests to console
  },
  "/hubs": {
    "target": "http://localhost:5000",   // SignalR hubs
    "secure": false,
    "changeOrigin": true,
    "ws": true                            // enable WebSocket proxying for SignalR
  }
}

// With path rewriting (if API prefix differs):
// "/api": {
//   "target": "http://localhost:5000",
//   "pathRewrite": { "^/api": "" }      // strip /api prefix before forwarding
// }

// ── angular.json — register the proxy config ──────────────────────────────
// "serve": {
//   "options": {
//     "proxyConfig": "proxy.conf.json"   // ← add this line
//   }
// }

// ── How it works ──────────────────────────────────────────────────────────
// Browser:   GET http://localhost:4200/api/posts
// ↓ Angular dev server intercepts /api/* requests
// ↓ Forwards to: GET http://localhost:5000/api/posts
// ↓ Response returned to browser as if from localhost:4200
// Browser sees: same origin (localhost:4200) — no CORS needed!

// ── Environment config — use relative URL in development ──────────────────
// src/environments/environment.ts:
// export const environment = {
//   apiUrl: '',   // empty — /api/posts resolved relative to dev server origin
//   ...
// };

// src/environments/environment.prod.ts:
// export const environment = {
//   apiUrl: 'https://api.blogapp.com',  // absolute URL for production
//   ...
// };

// ── Service uses relative URL in dev, absolute in production ──────────────
@Injectable({ providedIn: 'root' })
export class PostsApiService {
  private config  = inject(APP_CONFIG);
  private http    = inject(HttpClient);
  // In dev:  this.config.apiUrl = '' → '/api/posts' (proxied)
  // In prod: this.config.apiUrl = 'https://api.blogapp.com' → 'https://api.blogapp.com/api/posts'
  private baseUrl = `${this.config.apiUrl}/api/posts`;
}

// ── Multiple targets for microservices ────────────────────────────────────
// proxy.conf.json:
// {
//   "/api/posts":   { "target": "http://localhost:5001" },  // Posts API
//   "/api/users":   { "target": "http://localhost:5002" },  // Users API
//   "/api/comments":{ "target": "http://localhost:5003" }   // Comments API
// }

Common Mistakes #

Mistake 1 — Not adding ws: true for SignalR WebSocket proxying (connection falls back to long polling) #

❌ Wrong — proxy target without "ws": true; WebSocket upgrade fails; SignalR falls back to long polling.

✅ Correct — "ws": true in the proxy target for any path used by SignalR hubs.

Mistake 2 — Using the proxy URL (empty apiUrl) in production build (requests go nowhere) #

❌ Wrong — environment.prod.ts has empty apiUrl; production app calls /api/posts which 404s on the CDN.

✅ Correct — environment.prod.ts has the full absolute production API URL.