アクセス制御オリジンヘッダー（角4のアプリケーション）

Question

私はPlayフレームワークベースのREST APIをポスト9000のマシンでローカルに実行しています。私はAngular 4アプリケーションをlocalhostでもポート4200で実行しています。

このAngularアプリケーションでは、REST APIから取得したJSONを表示したいと考えています。私はChromeでそれを試してみましたが、角度のアプリがプレイサーバからJSONを表示することができませんでしたし、それがブラウザのコンソールに次のメッセージを示しています

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. 

は、だから私はこのケースで何をしますか？

Answer 1

これは私がこれを解決するためにしたものです！私のPlayフレームワークアプリケーションでは、すべてのAPIエンドポイントにヘッダーを追加しました。

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" 
    ) 
    } 

私が応答を返す場所では、ヘッダーを追加します。

Ok("The API is ready").withHeaders 

これは醜いの柔らかいですが、私はおそらくフィルタこの追加ヘッダに移動しますね！