How do you configure Angular CLI dev server proxying?

WHAT THIS TESTS: This question evaluates whether you understand the Angular CLI development server's built-in proxy capability and can distinguish a frontend build-tool solution from backend or browser workarounds. Senior engineers should know that CORS is a browser security feature, but during local development the CLI can transparently route requests through the dev server to avoid cross-origin friction without altering the production API.

A GOOD ANSWER COVERS: First, create a proxy configuration file such as src/proxy.conf.json containing a path pattern and target. For example, map /api to http://localhost:3000 with secure set to false if the backend uses HTTP. Second, wire this file into the project by adding the proxyConfig option under the serve target in angular.json, pointing to the proxy file path. Third, emphasize that the ng serve process must be restarted after any proxy file edit because the dev server reads the configuration at startup. Fourth, mention path matching nuances, specifically that /api matches only the exact path in the Vite-based dev server while /api/ matches all subpaths, and that the legacy Webpack dev server treated /api as equivalent to /api/.

COMMON WRONG ANSWERS: Suggesting to enable CORS on the backend is a red flag because the question specifically asks for a CLI dev server fix and backend changes are often impossible or undesirable in local setups. Proposing to swap URLs in environment.ts files does not solve the CORS problem; the browser will still block cross-origin requests. Recommending browser flags or extensions to disable CORS indicates a misunderstanding of both security and sustainable development workflows. Another weak answer is editing the backend port to match the frontend, which is impractical in real teams.

LIKELY FOLLOW-UPS: An interviewer might ask how path rewriting works if the backend does not expect the /api prefix, which you handle with the pathRewrite property in the proxy config. They might also ask about proxying WebSocket connections during development, or how this setup translates to production where the proxy does not exist and a real reverse proxy or same-origin deployment is required. You should also be ready to discuss SSL handling when the backend uses self-signed certificates.

ONE CONCRETE EXAMPLE: Suppose your Angular app runs on localhost:4200 and your Express API runs on localhost:3000. You create src/proxy.conf.json with /api/** as the key, target set to http://localhost:3000, and secure set to false. In angular.json, under projects my-app architect serve options, you add proxyConfig pointing to src/proxy.conf.json. When you run ng serve, a request from your Angular service to /api/users is forwarded by the dev server to http://localhost:3000/api/users, the browser sees a same-origin request, and CORS errors disappear. If you change the proxy file, you must stop and restart ng serve for the new rules to take effect.

Source: angular.dev