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
Evitare la script injection nelle GitHub Actions
Creare un'applicazione React e configurare Tailwind CSS
Utilizzare Tailwind CSS all'interno di React: primi componenti
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Gestire i null nelle reactive form tipizzate di Angular
Sottoscrizione agli eventi sul contenitore in JavaScript
Routing statico e PreRendering in una Blazor Web App
Evitare la command injection in un workflow di GitHub
Cache policy su route groups di Minimal API in ASP.NET Core 7
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Utilizzare i primary constructor in C#