呼叫播放2 REST API与AngularJS（CORS问题） [英] Call Play 2 REST API with AngularJS (CORS Problems)

问题描述

我开发一个AngularJS应用程序中调用与播放框架2.2.0开发的REST API。

I am developing an AngularJS application calling a REST API developed with Play Framework 2.2.0.

我有相关的跨域Ajax调用的角应用程序和玩一会不在同一个站点上托管的问题。

I have a problem related to Cross-domain ajax calls as the Angular application and the Play one will not be hosted on the same domain.

下面是JS调用在我的角度服务：

Here is the JS call in my Angular service :

    $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);
        });

下面是我玩的应用程序的路径：

Here is the route in my Play app :

POST /分类/列表controllers.catalog.ProductCategoryController.list（）

• 如果我没有在请求发送任何数据，一切工作正常


• 如果我发送数据时，我就ACCESS_CONTROL_ALLOW_ORIGIN阿贾克斯错误，ACCESS_CONTROL_ALLOW_HEADERS

我唯一的解决方法如下：

The only workaround I have is the following :

• 拦截全球一流的所有请求，并添加标题

• Intercept all requests in Global class and add the headers

@覆盖
公益行动onRequest（请求的请求，法法）{
    返回新Action.Simple（）{
        @覆盖
        公开承诺＆LT; SimpleResult＆GT;电话（上下文CTX）抛出的Throwable
            Logger.debug（拦截请求和应用CORS头......）;
            ctx.response（）的setHeader（Controller.ACCESS_CONTROL_ALLOW_ORIGIN，*）。
            ctx.response（）的setHeader（Controller.ACCESS_CONTROL_ALLOW_HEADERS，内容类型）;
            返回delegate.call（CTX）;
        }
    };
}

添加另一条路线，在路线选项

Add another route with OPTIONS in routes

选项/分类/列表controllers.catalog.ProductCategoryController.list（）

有没有做的一种方式整合简单得多？

推荐答案

有没有CORS支持出戏箱;这就是我想看到改变的情况，但现在你已经确定了疣。

There's no CORS support out of the box in play; that's a situation I'd like to see changed, but for now you've identified a wart.

好消息是，你可以管理一个全球性的解决办法如果你有一个CORS设置所有资源确定。它可以在几种方法，其中之一已标识来完成。我的倾向是去同一个低级别选项的路线。

The good news is that you can manage a global workaround if you are OK having one CORS setting for all of your resources. It can be done in a couple of ways, one of which you identified. My inclination would be to go with a low level OPTIONS route.

是这样的：

OPTIONS        /*path                         controllers.Application.options()

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

From there, your handler definition can be something like:

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

这不是超洁净，但直到播放增加了一些更可行的，我认为这是在做OPTIONS航线吨您最好的选择（同样，假设你是一个全球性CORS设置舒服）

It's not super clean, but until Play adds something a bit more workable, I think it's your best option over making tons of OPTIONS routes (again, assuming you're comfortable with a global CORS setting)

这篇关于呼叫播放2 REST API与AngularJS（CORS问题）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！