Come configurare un proxy in Angular

In questo articolo imparerai a configurare un proxy in Angular da utilizzare durante lo sviluppo dell’applicazione, per effettuare richieste verso un server backend.

La configurazione consiste in 2 parti:

aggiungere una configurazione proxy
1. creare il file proxy.conf.json
2. aggiungere il contenuto
utilizzare la configurazione proxy all’avvio
- opzione 1: modificare package.json
- opzione 2: modificare angular.json

Parte A: aggiungere una configurazione proxy

Passo 1.

Aggiungi un nuovo file JSON proxy.conf.json nella posizione in cui si trova il file package.json.

Passo 2.

Il contenuto del nuovo file definisce il comportamento del proxy nella forma seguente:

{
  "/api/v1/*": {
    "target": "http://localhost:8080/",
    "secure": false,
    "changeOrigin": true
  }
}

Tutte le richieste che iniziano con /api/v1/ sono spedite all’indirizzo indicato da target
http://localhost:8080/ap1/v1/..

Puoi specificare l’oggetto target nella forma:

target: {
  "host": "localhost",
  "protocol": "http",
  "port": 8080
}

Parte B: utilizzare la configurazione proxy all'avvio

Opzione 1.

Modifica il contenuto del file package.json, in particolare, l’attributo start dell’oggetto scripts come nell’esempio:

{
  "name": "nome-applicazione",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  ...
}

Lo script start deve contenere il comando ng serve con l’opzione –proxy-config seguita dal nome del file:
ng serve --proxy-config proxy.conf.json

Opzione 2.

In questo caso, modifica il file angular.json aggiungendo l’opzione “proxyConfig” al target serve, specificando il nome del file proxy.conf.json come valore.

...
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "nome-applicazione:build",
      "proxyConfig": "proxy.conf.json"
    },
...

Avviare l'applicazione utilizzando il proxy

Il comando da lanciare per avviare l’applicazione utilizzando la configurazione proxy dipende dalla scelta fatta nella seconda parte di questo tutorial (parte B).

Se hai scelto l’opzione 1 dovrai avviare l’applicazione tramite npm e non con ng, viceversa, se hai scelto l’opzione 2 potrai utilizzare entrambi per l’avvio.

opzione 1 –> npm start
opzione 2 –> ng serve – npm start

Conclusione

Un esempio di chiamata GET con il modulo HttpClient che fa uso del proxy configurato poco fa è la seguente:

this.http.get(`/api/v1/risorsa`).subscribe(...);

.. che risponde all’indirizzo server http://localhost:8080/api/v1/risorsa.

Cosa succede se si effettuano chiamate ad indirizzi non definiti nel proxy?

Tutte le richieste non incluse nel proxy sono rivolte all’indirizzo stesso dell’applicazione Angular, o meglio, all’indirizzo del server di sviluppo (DevServer) sulla quuale è in esecuzione l’applicazione:
http://localhost:4200

In tutti gli altri casi in cui viene specificata una URL completa per la richiesta (dominio, porta, …), succede che il browser impedisce la chiamata per un errore di Cross-Origin Resource Sharing (CORS).

'/api/v1/risorsa' –> http://localhost:8080/api/v1/risorsa
'/rest-api/risorsa' –> http://localhost:4200/rest-api/risorsa
'http://localhost:8080/api/v1/risorsa' –> errore di CORS

Hai appena visto come configurare un proxy in Angular per effettuare richieste verso un server backend senza errori CORS. Esistono altri modi per superare il problema CORS durante lo sviluppo di applicazioni frontend, ad esempio, installando un plugin sul browser, ma questa è un’altra storia …

Approfondimenti: