Zugriffssteuerung Origin Header in Angular 4 App

Question

Ich habe eine Play-Framework-basierte REST-API lokal auf meinem Computer auf Post 9000 ausgeführt. Ich habe eine Angular 4 App auf Port 4200 auch auf localhost ausgeführt.

Ich möchte, dass diese Angular-App den JSON anzeigt, den ich von der REST-API erhalte. Ich versuchte es auf Chrome, aber der Winkel App könnte die JSON aus dem Play-Server nicht angezeigt, und es zeigt die folgende Meldung in der Browser-Konsole:

XMLHttpRequest cannot load http://localhost:9000/powerPlant/4/details. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. 

Also, was ich in diesem Fall tun?

Answer 1

Ok! Das habe ich getan, um das zu lösen! In meiner Play Framework-Anwendung habe ich jedem API-Endpunkt den Header hinzugefügt!

implicit class ResultExtensions (result: Result) { 
    def withHeaders = result.withHeaders(
     "Access-Control-Allow-Origin" -> "*" 
     , "Access-Control-Allow-Methods" -> "OPTIONS, GET, POST, PUT, DELETE, HEAD" 
     , "Access-Control-Allow-Headers" -> "Accept, Content-Type, Origin, X-Json, X-Prototype-Version, X-Requested-With" //, "X-My-NonStd-Option" 
     , "Access-Control-Allow-Credentials" -> "true" 
    ) 
    } 

In den Orten, wo ich die Antwort zurückgeben, füge ich die Header!

Das ist weich von hässlich, aber ich denke, ich werde diese Header hinzufügen, wahrscheinlich einen Filter!