Fix an Angular CORS error

Recognize the error

The console shows Access to fetch at 'http://localhost:3000/api/items' from origin 'http://localhost:4200' has been blocked by CORS policy. Angular 22 uses the fetch backend by default; apps on the XHR backend show Access to XMLHttpRequest at instead. HttpClient receives no response, only an HttpErrorResponse with status 0 and statusText Unknown Error.

The error message depends on the backend: with the default fetch backend it reads Http failure response for http://localhost:3000/api/items: 0 undefined, because a failed fetch carries no status text. On the XHR backend it reads Http failure response for http://localhost:3000/api/items: 0 Unknown Error. Status 0 also appears when the API is not running or the host name does not resolve; the console message tells you which one.

Set up proxy.conf.json for ng serve

The Angular CLI dev server can forward requests to your API. The browser then only talks to http://localhost:4200, so there is no cross-origin request. You configure it with a proxy.conf.json file.

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

1. Create src/proxy.conf.json

   Map /api/** to http://localhost:3000. Setting secure: false skips certificate checks when the target uses https, for example a local API with a self-signed certificate.

2. Reference it in angular.json

   Set proxyConfig to src/proxy.conf.json in the options of the serve target, or run ng serve --proxy-config src/proxy.conf.json.

3. Restart ng serve

   The dev server reads the proxy file when it starts, so restart ng serve after every change.

4. Call relative URLs

   Request /api/items, not http://localhost:3000/api/items. An absolute URL skips the proxy and runs into CORS again.

{
  "projects": {
    "my-app": {
      "architect": {
        "serve": {
          "builder": "@angular/build:dev-server",
          "options": {
            "proxyConfig": "src/proxy.conf.json"
          }
        }
      }
    }
  }
}

import { HttpClient } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';

export interface Item {
  id: number;
  name: string;
}

@Injectable({ providedIn: 'root' })
export class ItemsService {
  private readonly http = inject(HttpClient);

  // ng serve forwards /api/items to http://localhost:3000/api/items
  list() {
    return this.http.get<Item[]>('/api/items');
  }
}

The older webpack-based builder, @angular-devkit/build-angular:dev-server, treats /api as /api plus every sub-path. Check the builder of the serve target in angular.json to see which one you use.

Fix CORS in production

ng build outputs static files, and the dev-server proxy is not part of them. In production, either the API allows your app's origin with Access-Control-Allow-Origin, or a reverse proxy on your host serves the app and /api from the same origin, so no CORS check happens. An HttpInterceptor cannot fix CORS: it changes the request, and CORS is decided by the response headers. Server guides: Express, Spring Boot, FastAPI, Django, Laravel.

withCredentials and cookies

withCredentials: true makes HttpClient send cookies cross-origin. The response then needs Access-Control-Allow-Credentials: true and your exact origin; * is rejected. Details: Access-Control-Allow-Credentials.

Third-party APIs without CORS headers

For a public third-party API that sends no CORS headers, put https://proxy.cors.dev/ in front of the URL. For example, the Steam news API on api.steampowered.com sends no CORS headers. A plain HttpClient GET adds only an Accept header, which the proxy passes through. The free tier covers GET and HEAD with no signup, no key, responses up to 1 MiB, and fair-use rate limits on a shared pool. Authorization and custom headers are rejected, so APIs that need a key go through your own backend.

import { HttpClient } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';

interface SteamNews {
  appnews: { newsitems: { gid: string; title: string; url: string }[] };
}

@Injectable({ providedIn: 'root' })
export class SteamNewsService {
  private readonly http = inject(HttpClient);

  latest(appId: number) {
    const target = `https://api.steampowered.com/ISteamNews/GetNewsForApp/v2/?appid=${appId}&count=5`;
    return this.http.get<SteamNews>(`https://proxy.cors.dev/${target}`);
  }
}

Good questions.