
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
- creare il file proxy.conf.json
- aggiungere il contenuto
- utilizzare la configurazione proxy all’avvio
- opzione 1: modificare package.json
- opzione 2: modificare angular.json
La configurazione che segue non è pensata per un'ambiente di produzione, è valida solo in ambiente di sviluppo.
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
}
}
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.
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(...);
http://localhost:8080/api/v1/risorsa
.Cosa succede se si effettuano chiamate ad indirizzi non definiti nel proxy?
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:
No comment yet, add your voice below!