Question

我在9000之后的机器上运行了一个基于Play框架的REST API。我在本地主机上也有一个在端口4200上运行的Angular 4应用程序。

我希望这个Angular应用程序显示我从REST API获得的JSON。我在Chrome上试过，但Angular应用无法从Play服务器显示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

这很难看，但我想我会将这个添加标题移动到可能是过滤器！

Angular 4 App中的访问控制源头

1 个答案: