Angular-CLI Proxy + JEE

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

Über Dominik Mathmann
Dominik Mathmann arbeitet als Berater, Entwickler und Trainer bei der GEDOPLAN GmbH. Auf Basis seiner langjährigen Erfahrung in der Implementierung von Java-EE-Anwendungen leitet er Seminare, hält Vorträge und unterstützt Kunden bei der Konzeption und Realisierung von Webanwendungen vom Backend bis zum Frontend. Sein derzeitiger Schwerpunkt liegt dabei auf der Entwicklung von JSF-Anwendungen. Er sieht die stärker werdende Position von JavaScript-Frameworks jedoch positiv und beschäftigt sich darüber hinaus mit Webframeworks wie Angular.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google Foto

Du kommentierst mit Deinem Google-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s

%d Bloggern gefällt das: