使用AngularJS调用Play 2 REST API（CORS问题）

Question

我正在开发一个AngularJS应用程序，该应用程序调用使用Play Framework 2.2.0开发的REST API。

我有一个与跨域ajax调用有关的问题，因为Angular应用程序和Play One不会托管在同一域中。

这是我的Angular服务中的JS调用：

    $http
        .post("http://localhost:9001/category/list", { langCode: 'fr-FR' })
        .success(function(data, status, headers, config) {
            callback(data.items);
        })
        .error(function(data, status, headers, config) {
            console.log("Error Data : " + data);
            console.log("Error Status : " + status);
        });

这是我的Play应用中的路线：

POST /category/list controllers.catalog.ProductCategoryController.list()

• 如果我未在请求中发送任何数据，则一切正常
• 如果我发送数据，我会遇到有关ACCESS_CONTROL_ALLOW_ORIGIN，ACCESS_CONTROL_ALLOW_HEADERS的Ajax错误

我唯一的解决方法是：

• 拦截Global类中的所有请求并添加标头

  @Override public Action onRequest(Request request, Method method) { return new Action.Simple() { @Override public Promise<SimpleResult> call(Context ctx) throws Throwable { Logger.debug("Intercepting request and applying CORS headers..."); ctx.response().setHeader(Controller.ACCESS_CONTROL_ALLOW_ORIGIN, "*"); ctx.response().setHeader(Controller.ACCESS_CONTROL_ALLOW_HEADERS, "Content-Type"); return delegate.call(ctx); } }; }

• 在路线中添加带有OPTIONS的其他路线

OPTIONS /category/list controllers.catalog.ProductCategoryController.list()

有没有办法使集成更简单？

Answer 1

游戏中没有开箱即用的CORS支持； 我想看到这种情况发生了变化，但是到目前为止，您已经发现了疣。

好消息是，如果可以为所有资源设置一个CORS， 则可以管理全局解决方法。 可以通过几种方法来完成，您已确定其中一种。 我倾向于采用低级别的OPTIONS路线。

就像是：

OPTIONS        /*path                         controllers.Application.options()

从那里，您的处理程序定义可以是这样的：

Ok("").withHeaders(
      "ACCESS_CONTROL_ALLOW_METHODS" -> "GET, POST, PUT, PATCH",
      "ACCESS_CONTROL_ALLOW_HEADERS"->"Content-Type", 
      "ACCESS_CONTROL_ALLOW_ORIGIN" -> "*"
)

它不是超级干净，但是在Play添加一些更可行的方法之前，我认为这是制造大量OPTIONS路线的最佳选择（同样，假设您对全局CORS设置感到满意）

Answer 2

您必须为Play Web服务器启用CORS支持。 以下网址确实提供了许多配置如何启用跨源支持的服务器的方法：

http://enable-cors.org/server.html