Question

我有一个基于playFramework构建的项目。它有很多业务逻辑，涉及演员，不同的解析器，通过API工作三个服务等。前端是用angularJs（单个网页应用程序）编写的。我们也使用coffeScript和更少，为此我添加了sbt插件来编译它们

我觉得完全拥有这些东西是不对的。每当我使用与css文件相关的更改推送到存储库时，jenkins会下载scala依赖项，构建项目等。它只是用户体验的静态内容。

当他需要在后端部分进行一些更改时，我的前端开发人员会发疯，因为他不太了解scala。所以他花了很多时间来尝试让它工作，而我可以在最短的时间内完成这项任务。

我认为一个存储库应该是前端（角度，咖啡，更少，图像，字体），第二个是后端。

今天我读过很少关于这个问题的文章，得到了启发，我决定将它们分开一次：）

首先我安装了node，npm，grunt和http-server 然后我为grunt设置了插件：less和coffee。

我在地址：localhost：8282

上运行'grunt http-server'

在地址上发布我的播放应用程序：localhost：9000

然后用'localhost：9000 / api / client'替换旧的角度$ resource url'/ api / client'以检查它是否有效，我将在localhost：8282页面上看到客户列表。但它不起作用。我在js控制台中得到了这个：

XMLHttpRequest cannot load localhost:9000/api/client. Origin localhost:8282 is not allowed by Access-Control-Allow-Origin

这是跨域问题，所以我用google搜索并更改了服务器/ api / client

Ok(toJson(res.sortBy(_.id))).withHeaders(("Access-Control-Allow-Origin", "*"))

正确应用标题，我在safari中检查了这个。我还配置了角$ httpProvider

$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

但它仍然不起作用。

我不熟练设置http服务器，但可能有更好的方法吗？可能是要设置一些代理？或者设置nginx如何？

有什么建议吗？谢谢！

Answer 1

在游戏中设置CORS包含两个步骤

回应预检请求（选项请求）
设置回复标题。

似乎您错过了第一步，请查看此article了解详细信息。

Answer 2

感谢Rebotnix

你是对的，后端没有回复所需的标题。

文章中的Scala代码已经过时（在2.3.6中没有PlainResult），但它解释了使用CORS的重点。

package controllers.filters

import play.api.mvc.{Filter, RequestHeader, Result}

import scala.concurrent.ExecutionContext.Implicits.global
import scala.concurrent.Future

object CorsFilter extends Filter {

  override def apply(nextFilter: (RequestHeader) => Future[Result])(rh: RequestHeader): Future[Result] = {

    nextFilter(rh).map { result =>
      result.withHeaders(
        "Access-Control-Allow-Origin" -> "*",
        "Access-Control-Allow-Methods" -> "POST, GET, OPTIONS, PUT, DELETE"
      )
    }

  }

}

全球设置：

import controllers.filters.CorsFilter
import play.api.mvc.WithFilters

object Global extends WithFilters(CorsFilter)

预检行动（与文章的相同）

def preflight(url: String) = Action {
    Ok.withHeaders(
      "Access-Control-Allow-Origin" -> "*",
      "Access-Control-Allow-Headers" -> "Origin, X-Requested-With, Content-Type, Accept, Referer, User-Agent",
      "Access-Control-Allow-Methods" -> "POST, GET, PUT, DELETE, OPTIONS",
      "Allow" -> "*"
    )
  }

并设置预检路线：

OPTIONS        /*anyUrl                                                 controllers.Application.preflight(anyUrl:String)

现在一切正常！

如何正确分离前端和后端？

2 个答案: