Molto spesso le applicazioni Angular vanno a raccogliere e inviare dati ad API residenti su domini diversi da quello del suo host. Ad esempio, la nostra applicazione potrebbe girare sul dominio www.sito.it e dover attingere da API esposte su api.sito.it o apisterne.com. In questi casi dobbiamo configurare correttamente le policy CORS sui server e il gioco è fatto.
Tuttavia esistono casi in cui applicazione Angular e API vivono all'interno dello stesso dominio. In fase di sviluppo riprodurre questo modello non è semplice, in quanto l'applicazione Angular e quella server sono servite da host differenti (anche se usiamo localhost, le porte sono diverse tra le applicazioni e questo viene visto come host diverso dai browser). Se utilizziamo la protezione dell'applicazione Angular tramite cookie di dominio, dobbiamo trovare un modo per far credere ai browser che applicazione Angular e le API siano sotto lo stesso dominio. A questo scopo possiamo sfruttare il web server di sviluppo di Angular il quale ha la capacità di agire da proxy verso le chiamate alle API. Possiamo infatti effettuare le chiamate alle API sulla porta di Angular e lasciare che sia il web server ad agire come proxy rigirando le chiamate al server originale.
Per fare questo dobbiamo prima di tutto creare il file di configurazione nel seguente modo.
{ "/api": { "target": "http://localhost:49164/", "secure": false, "logLevel": "debug", "pathRewrite": { "^/api": "/" } } }
Il file specifica che ogni volta che arriva una chiamata all'url localhost:4200/api, questa chiamata deve essere rigirata all'host localhost:49164. Tramite il parametro pathRewrite specifichiamo che il prefisso /api deve essere eliminato in fase di redirezionamento ottenendo così l'url reale dell'api. In questo modo tutte le chiamate fatte dal browser saranno sempre sul dominio dell'applicazione Angular e verranno redirezionate in modo trasparente così da non avere problemi né con l'autenticazione che utilizza cookie di dominio, né con CORS.
Una volta creato il file, dobbiamo dire al web server di Angular di utilizzarlo e questo lo facciamo impostando un riferimento al file nella sezione projects/NomeProgetto/architect/serve del file angular.json.
{ "projects": { "my-project": { "architect": { "serve": { "options": { "proxyConfig": "src/proxy.conf.json" } } } } } }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Controllare gli accessi IP alle app con Azure Container Apps
Miglioramenti nelle performance di Angular 16
Sostituire la GitHub Action di login su private registry
Miglioramenti agli screen reader e al contrasto in Angular
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Implementare l'infinite scroll con QuickGrid in Blazor Server
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Installare le Web App site extension tramite una pipeline di Azure DevOps
Generare token per autenicarsi sulle API di GitHub