Molto spesso le applicazioni Angular vanno a raccogliere e inviare dati ad API residenti su domini diversi da quello del suo host. Ad esempio, la nostra applicazione potrebbe girare sul dominio www.sito.it e dover attingere da API esposte su api.sito.it o apisterne.com. In questi casi dobbiamo configurare correttamente le policy CORS sui server e il gioco è fatto.
Tuttavia esistono casi in cui applicazione Angular e API vivono all'interno dello stesso dominio. In fase di sviluppo riprodurre questo modello non è semplice, in quanto l'applicazione Angular e quella server sono servite da host differenti (anche se usiamo localhost, le porte sono diverse tra le applicazioni e questo viene visto come host diverso dai browser). Se utilizziamo la protezione dell'applicazione Angular tramite cookie di dominio, dobbiamo trovare un modo per far credere ai browser che applicazione Angular e le API siano sotto lo stesso dominio. A questo scopo possiamo sfruttare il web server di sviluppo di Angular il quale ha la capacità di agire da proxy verso le chiamate alle API. Possiamo infatti effettuare le chiamate alle API sulla porta di Angular e lasciare che sia il web server ad agire come proxy rigirando le chiamate al server originale.

Per fare questo dobbiamo prima di tutto creare il file di configurazione nel seguente modo.

{
  "/api": {
    "target": "http://localhost:49164/",
    "secure": false,
    "logLevel": "debug",
    "pathRewrite": {
      "^/api": "/"
    }
  }
}

Il file specifica che ogni volta che arriva una chiamata all'url localhost:4200/api, questa chiamata deve essere rigirata all'host localhost:49164. Tramite il parametro pathRewrite specifichiamo che il prefisso /api deve essere eliminato in fase di redirezionamento ottenendo così l'url reale dell'api. In questo modo tutte le chiamate fatte dal browser saranno sempre sul dominio dell'applicazione Angular e verranno redirezionate in modo trasparente così da non avere problemi né con l'autenticazione che utilizza cookie di dominio, né con CORS.

Una volta creato il file, dobbiamo dire al web server di Angular di utilizzarlo e questo lo facciamo impostando un riferimento al file nella sezione projects/NomeProgetto/architect/serve del file angular.json.

{
  "projects": {
    "my-project": {
      "architect": {
        "serve": {
          "options": {
            "proxyConfig": "src/proxy.conf.json"
          }
        }
      }
    }
  }
}