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
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 specificatohttp://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’indirizzohttp://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.
npm start
opzione 2 –>
ng serve – npm startUtilizzare 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.
Approfondimenti:
No comment yet, add your voice below!