在 Angular + Scala Play 上启用 CORS

Question

使用 AngularJS 1.2.16 和 Scala Play 2.2.0，我正在尝试启用 CORS。

这是我在前端的请求。基本上它是一个POST发送带有userName和password字段的JSON 。

Request URL:http://localhost:9000/login
Request Headers CAUTION: Provisional headers are shown.
Accept:application/json, text/plain, */*
Content-Type:application/json;charset=UTF-8
Origin:http://localhost:8000
Referer:http://localhost:8000/app.html
User-Agent:Mozilla/5.0 ...
Request Payloadview source
  {userName:foo, password:bar}

这checkPreFlight是允许我的POST请求标头的后端方法。

  def checkPreFlight = Action {
    Ok("...").withHeaders(
      ACCESS_CONTROL_ALLOW_ORIGIN -> "*",
      ACCESS_CONTROL_ALLOW_METHODS -> "POST",
      ACCESS_CONTROL_MAX_AGE -> "300",
      ACCESS_CONTROL_ALLOW_HEADERS -> "Origin, X-Requested-With, Content-Type, Accept,
                                         Referer, User-Agent")
  }

routes：

POST    /login                      controllers.Home.login
OPTIONS /login                      controllers.Home.checkPreFlight

我的 Chrome 浏览器的控制台显示：

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

请注意，初始OPTIONS请求返回了 200，但POST在网络选项卡中已取消。Chrome（根据这篇文章）可能会出于安全目的禁用 CORS 请求？

当我在 Firefox 上尝试时，OPTIONS和 都POST成功了200，每个都有一个状态。但是，Firefox 仍然在控制台中显示错误：

200 OK 12ms 

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote 
resource at http://localhost:9000/login. This can be fixed by moving the resource 
to the same domain or enabling CORS.

此外，我的承诺（称为 POST to /login）被拒绝，即我console.log在成功和失败案例中添加了 a 。

Answer 1

您已经证明在对 OPTIONS 飞行前请求的响应中设置了 Access-Control-Allow-Origin。但是（在我写这篇文章的时候）你还没有显示在对 POST 请求本身的响应中设置的标头。由于这是一个容易犯的错误，我冒昧地猜测这就是您的错误所在。

两个响应中都需要存在标头。这意味着，对于您提供的代码，您需要在两者controllers.Home.checkPreflight和controllers.Home.login