In questo articolo vedrai come configurare ed utilizzare un proxy in Angular per effettuare chiamate esterne al server di sviluppo.
Come definire un proxy
Crea un nuovo file JSON, proxy.conf.json, nella stessa posizione in cui si trova il file package.json.
Il contenuto del file definisce il comportamento che assumerà il proxy e dovrà essere nella forma:
{
"/PATH/*": {
"target": "URl",
"secure": false,
"changeOrigin": true
},
...
}Una rotta di proxy cosi definita, istruirà l’applicazione a dirigere tutte le chiamate http che hanno un percorso definito da “PATH” verso l’indirizzo url definito in “URL”.
In generale, potrai definire più rotte proxy specificando più chiavi PATH.
L’esempio seguente mostra la definizione di una rotta proxy in cui tutte le chiamate http che hanno un percorso di partenza “/api” saranno indirizzate al target esterno “http://localhost:8080/api/*”.
{
"/api/*": {
"target": "http://localhost:8080/",
"secure": false,
"changeOrigin": true
}
}Puoi anche specificare separatamente l’oggetto target scomponendolo nella forma:
target: {
"host": "localhost",
"protocol": "http",
"port": 8080
}Parametro pathRewrite
Un’opzione interessante consiste nell’inserimento del parametro pathRewrite. Questo permette di indicare un percorso alternativo a quello indicato (api).
{
"/api/*": {
"target": "http://localhost:8080/",
"secure": false,
"changeOrigin": true,
"pathRewrite": {
"^/api" : "/v2"
}
}
}In questo caso, tutte le richieste verso “{target}/api/…” saranno indirizzate a “{target}/v2/…”.
Come configurare un proxy in Angular
Una volta definito il file proxy.conf.json, questo dovrà essere utilizzato all’avvio dell’applicazione. Quindi, come configurare l’applicazione Angular affinché legga la configurazione proxy?
Esistono 2 opzioni:
Opzione 1.
Modifica il file package.json e in particolare l’attributo start 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"
},
...
}In pratica, se utilizzi l’opzione 1, dovrai aggiungere l’opzione –proxy-config seguito dal nome del file proxy proxy.conf.json al comando ng serve.
Opzione 2.
In questo caso, modifica il file angular.json aggiungendo la chiave “proxyConfig” fra le opzioni, indicando 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"
},
...Arrivato a questo punto, avrai configurato correttamente il tuo proxy da utilizzare nella tua applicazione Angular!
Vediamo ora come avviare il server di sviluppo, e quindi l’applicazione, facendo uso del proxy appena definito.
Avviare il server di sviluppo utilizzando il proxy
Il comando da lanciare per avviare l’applicazione utilizzando la configurazione proxy, dipende dalla scelta fatta durante la configurazione (opzione 1 e opzione 2).
Se utilizzi l’opzione 1:
npm start
Se utilizzi l’opzione 2:
ng serve
oppure
npm start
Quando avrai lanciato il comando, verrà mostrato in console durante la compilazione un messaggio del tipo “Proxy created: /api -> http://localhost:8080”, che indica il corretto utilizzo della configurazione proxy.
Bonus: quando si utilizza un proxy?
In generale, un’applicazione Angular rappresenta la parte front-end di un progetto che fa uso di servizi REST, mentre è il back-end a fornire le risorse. Vedi come creare servizi web RESTful con Spring Boot.
Quando si richiede una risorsa esterna via REST dobbiamo utilizzare il protocollo HTTP. Un’implementazione in Angular è simile alla seguente:
constructor(
private readonly httpClient: HttpClient
) { }
getAll(): Observable<ResourseType> {
return this.httpClient.get<ResourseType>(`/api/pippo`);
}L’indirizzo specificato all’interno della chiamata get del modulo HttpClient identifica la risorsa “pippo” disponibile al percorso /api/pippo.
Puoi trovare un esempio completo di applicazione Angular in questo articolo.
Cosa vuol dire utilizzare un proxy nel server di sviluppo?
Aver configurato un proxy, come visto in questo articolo, permette di effettuare chiamate HTTP esterne all’indirizzo del server di sviluppo Angular.
Cosa succede se si effettuano chiamate ad indirizzi non definiti nel proxy?
Tutte le richieste non definite nella configurazione proxy sono rivolte allo stesso indirizzo del server di sviluppo Angular (DevServer) sulla quale è in esecuzione l’applicazione, di default rappresentato da http://localhost:4200.
In tutti gli altri casi, si parla di chiamate cross-origin. In questo caso, il browser impedisce l’accesso alle risorse esterne generando un errore di Cross-Origin Resource Sharing (CORS).
Conclusione
Hai appena come configurare un proxy in Angular per effettuare richieste HTTP esterne al server di sviluppo evitando errori di CORS.
No comment yet, add your voice below!