So geben Sie 'Access-Control-Allow-Origin' an, wenn angle-cli serve ausgeführt wird

Question

Ich verwende einen Spring-API-Server und einen Angular-CLI-Server, um meinen statischen Inhalt bereitzustellen. In der Produktion werden wir ein CDN verwenden, aber für die Entwicklung laufen sowohl der Front- als auch der Backend-Server in meiner lokalen Box an verschiedenen Ports. Der Spring-Server liefert die erste HTML-Seite und dann kommen der Rest von JS, CSS und HTML aus dem angular-cli/CDN.

Das Problem ist, dass, wenn der Aufruf von System.import() gemacht wird, beschwert sich der Browser über CORS: XMLHttpRequest kann http://localhost:4200/system-config.js nicht geladen werden. Kein 'Access-Control-Allow-Origin'-Header ist auf der angeforderten Ressource vorhanden. Origin 'http://localhost:8080' ist daher nicht erlaubt. zone.js: 323 Fehler: Fehler: XHR Fehler beim Laden http://localhost:4200/system-config.js (...)

Wie kann ich Winkel-cli konfigurieren Header die 'Access-Control-Allow-Origin' zu setzen, so der Browser kotze nicht.

Answer 1

Ich löste dieses Problem tatsächlich mit dem ember-cli-cors Add-on. Alles, was Sie tun müssen, ist es mit dem ng-Befehl wie folgt zu installieren: ng installieren ember-cli-cors

Answer 2

Die Konfiguration zur Unterstützung von CORS erfolgt auf dem Server. Sie müssen Ihre Spring-API aktualisieren, um Anfragen von der CLI-App zuzulassen, die standardmäßig auf Port 4200 gehostet wird.

Answer 3

Sie können eine proxy config hinzufügen. Es wird die Anfrage an die Domain Ihres Servers "weitergeben".

Answer 4

FWIW,

CORS hat in Winkel CLI nun aktiviert wurde. Standardmäßig ist der Header Access-Control-Allow-Origin auf * eingestellt. Nicht sicher, wann genau es veröffentlicht wurde, aber sicher 1.0.0 und später haben es aktiviert.

Wie bei allen CORS-Problemen muss auch Ihr API-Server so konfiguriert werden, dass er CORS akzeptiert.

Answer 5

In einem sehr ähnlichen Setup stellte sich heraus, dass Chrome-basierte Browser CORS für Local Host-Adressen nicht unterstützen. Siehe https://stackoverflow.com/a/10892392/661414

Answer 6

Ich verbrachte gerade 20 Stunden damit, dieses Problem zu lösen und zahlreiche Beiträge zu lesen. Die schnelle Antwort ist, ändern Sie die Server-CORS-Handhabung und vermeiden Sie Glassfish. Der folgende Code funktioniert bei Tom ee (möglicherweise anderen), nicht jedoch bei Glassfish.

@Provider 
public class NewCrossOriginResourceSharingFilter implements ContainerResponseFilter { 

@Override 
public void filter(ContainerRequestContext requestContext, ContainerResponseContext response) { 
    response.getHeaders().putSingle("Access-Control-Allow-Origin", "*"); 
    response.getHeaders().putSingle("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE"); 
    response.getHeaders().putSingle("Access-Control-Allow-Headers", "Content-Type"); 
} 
} 

den Code Zeile für Zeile von Halbierungs fand ich, dass das Hinzufügen der "Access-Control-Allow-Headers" Aufruf wird eine Ausnahme in Glasfischen in einem Internal Server Error resultierende (500). Anscheinend ist die Ausnahme seit über einem Jahr dort und zeigt keine Anzeichen von behoben zu werden.

Ich konnte nie die Proxy-Config-Lösung funktionieren. Ich würde Debugger-Nachrichten an die Wirkung von

/api/path/users => http:localhost:8080/ 

Es scheint, dass alle hinteren Pfad oder Abfrage params werden abgeschnitten durch den Proxy-Filter sehen.

Ich hoffe, dass dies jemand eine Menge Zeit spart.