Disegno schema proxy

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:

  1. aggiungere una configurazione proxy
    1. creare il file proxy.conf.json
    2. aggiungere il contenuto
  2. 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/ saranno indirizzate al target specificato
http://localhost:8080/ap1/v1/..

Puoi specificare separatamente l’oggetto target nella forma:

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

Tra i valori disponibili è possibile inserire il parametro pathRewrite che permette di sovrascrivere la path di riferimento (nell’esempio /api/v1/) con una personalizzata:

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

In quest’ultimo caso, tutte le richieste che iniziano con /api/v1/ saranno indirizzate all’indirizzo
http://localhost:8080/custom-api/..

 

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 servenpm start
 

Utilizzare il proxy in Angular

Puoi definire all’interno di un componente service Angular un metodo come segue:

constructor(
    private readonly httpClient: HttpClient
) { }
  
...
getAll(): Observable<ResourseType> {
    return this.httpClient.get<ResourseType>(`/api/v1/risorsa`);
}

l’indirizzo specificato all’interno della chiamata get del modulo HttpClient consiste nella path /api/v1 seguita dalla path identificativa della risorsa. In questo caso, se il file di proxy è stato configurato correttamente come visto poco fa, la chiamata verrà indirizzata verso 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 quale è in esecuzione l’applicazione:
http://localhost:4200

Tutti gli altri casi di chiamate al di fuori del proprio dominio (i.e. localhost) non configurate nel file proxy.conf.json sono chiamate cross-origin. In questo caso, il browser ne blocca l’accesso fornendo 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
 

Conclusione

In questo articolo, hai visto un modo per come configurare un proxy da utilizzare in un’applicazione Angular per effettuare richieste HTTP esterne, ad esempio, verso un server backend, evitando errori di CORS.

Recommended Posts

No comment yet, add your voice below!


Add a Comment

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *