In vielen kleinen bis mittleren Projekten wird unsere spätere Angular-Anwendung zusammen mit dem JEE Backend auf ein und demselben Server laufen. Das vereinfacht nicht nur den Betrieb sondern wir müssen uns auch über CORS-Richtlinien keine Gedanken machen.
Doch zumindest während der Entwicklungszeit wollen wir in aller Regel mit unterschiedlichen Servern arbeiten, bietet uns die Angular-CLI mit seinem eigenen kleinen Dev-Server die perfekte Lösung um unsere Anwendung während der Entwicklung zu begutachten. Damit stolpern wir aber über das bereits erwähnte CORS-Thema. Anstatt nun das Test- und oder Entwicklungs-Backend zurecht zu konfigurieren bietet Angular selbst eine einfache und transparente Lösung. Der Angular-Dev-Server lässt sich ganz einfach mittels einer Proxy-Konfiguration ergänzen, sodass alle Anfragen an eine bestimmten URL um geroutet werden. Damit sparen wir uns zum einen unterschiedliche Environment-Konfigurationen (da unsere APIs nun für die Angular Anwendung immer unter z.B. /api/… erreichbar sindund nicht um den Backend-Server ergänzt werden muss (http://localhost:8080/api/..)) und vor allem umgehen wir mit dieser Umleitung die Security-CORS-Regeln die der Browser anwenden würde.
{
"/api/*": {
"target": "http://localhost:8080/api",
"secure": false,
"logLevel": "debug",
"changeOrigin": true,
"pathRewrite": {
"^/api": ""
}
}
}
proxy.conf.json
Diese Konfiguration lässt sich nun ganz einfach per Kommandozeile beim Starten des Dev-Servers ergänzen
"ng serve --proxy-config proxy.conf.json"** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.
[HPM] Rewriting path from "/api/user" to "/user"
[HPM] GET /api/user ~> http://localhost:8080/api
