带有 JAX-RS 后端的 Angular 前端答案

【问题标题】：Angular Frontend with JAX-RS backend带有 JAX-RS 后端的 Angular 前端
【发布时间】：2013-02-02 23:17:20
【问题描述】：

我有一个 RESTful Java 后端，它是使用 Jersey（一种 JAX-RS 实现）制作的。这个后端在 8084 端口上的 glassfish 服务器上运行。我还制作了一些 HTML5/JS/AJAX 页面来显示数据，因此我知道我的 REST 实现正在运行。

我正在尝试使用 Angular.js 框架为此应用程序开发 HTML5/JS 前端，但遇到了一些麻烦。我已经成功开发了一些 Angular 的小型 Web 应用程序，我在 Microsoft 的 IIS 端口 80 上运行。

很遗憾，两个应用程序之间的通信似乎存在问题。由于我是 Angular 新手，我不确定我是否在前端代码中犯了错误，或者我是否遇到了 CORS 问题。我已经尝试使用 CORS 过滤器在 Tomcat 7 上运行后端，但这并没有解决任何问题。

我的 Angular 代码如下所示：

services.js

var serviceModule = angular.module('ServiceModule', ['ngResource']);
serviceModule.factory('NodeService', function($resource) {
var NodeService = $resource('http://localhost:port/HtmlJerseyJava/service/node/get/3',{},
    {
        'get' : { method: 'GET',params:{port:':8084'}}
    }
)
return NodeService;

});

controllers.js

function NodeDetailCtrl($scope, NodeService){
    var node3 = NodeService.get();
    $scope.data = JSON.stringify(node3) ;
}

我现在对 ID 3 进行了硬编码，因为我还需要弄清楚如何将输入字段的值从视图传递到控制器，然后再传递给服务。最终，服务 url 中的 3 将被替换为变量 :nodeId

任何帮助将不胜感激。

【问题讨论】：

嗨彼得。您是否已经检查过发生了什么样的通信？为此，您可以使用 Firebug 或 Google Chrome 开发者工具。这些工具允许您检查从客户端发送到服务器的请求以及响应是什么。我猜你遇到了 CORS 问题。但是检查网络流量（如上所述）可以证明这种猜测。问候马克
看来我的 Angular 前端实际上从未向我的 REST 后端发送请求。使用 HTML AJAX 文件，我可以清楚地看到一个 GET 请求被发送到 REST URL。对于我的 Angular 应用程序，似乎发送的唯一请求是请求应该显示 JSON 数据的 HTML 页面的请求。
好的，现在我已经设法更改我的代码，以便我得到一个 403 禁止错误。这是否意味着我正在与 CORS 作斗争？
是的，这听起来像是一个 CORS 错误。您可以通过检查网络流量来重新验证。应该有一个可选请求（而不是 GET）。
我设法在 glassfish 服务器的后端启用了 CORS，消除了 403 错误。我可以通过 IIS 上托管的 JS/AJAX 检索数据，因此应该不再存在 CORS 问题。不幸的是，它仍然不能通过 Angular 资源组件工作。似乎同时存在 CORS 问题和 Angular 编码错误。关于编码错误的任何想法？

标签： iis glassfish angularjs jax-rs cors

【解决方案1】：

试试下面的简化代码：

app.js（出于测试目的，我建议你将函数放在一个js文件中）

var serviceModule = angular.module('ServiceModule', ['ngResource']);
serviceModule.factory('Node', function($resource) {
return $resource('http://localhost:port/HtmlJerseyJava/service/node/get/3',{port:':8084'},
    {
        get {method:'GET'}
    });
});

serviceModule.controller('NodeDetailCtrl', function($scope, Node){
    $scope.data = Node.get();
}

现在您的客户端从 REST 调用中获得什么 JSON 数据会很有趣。

问候马克

【讨论】：

这是 REST API 返回的 json 对象：{"id":3,"name":"ghi6814","properties":{}}。还有一个 HTTP 标头指示请求是否成功。我用这种方式尝试过，它也失败了。该请求仍然没有出现在萤火虫中。我也尝试了 $http 但结果相同。
嘿彼得。所以你得到了一些 json 数据作为结果？然后请求似乎有效？！您是否已切换到 Firebug 中的“Net”面板并在再次发送请求之前启用它？
我可以在 HTML 页面上通过简单的 AJAX 请求检索 JSON 数据。此 HTML 页面位于 Web 服务器上，并成功连接到应用程序服务器，因此我希望 CORS 问题得到解决。我在firebug中更改为NET面板，我可以在那里看到请求。但是有区别。它不是 GET 3，而是 OPTIONS 3。URL 是正确的，它返回 Status 200。但是在请求标头中，返回类型是错误的。它没有说应用程序/JSON，我认为这就是答案为空的原因
请求头Accept是text/html，application/xhtml+xml，application/xml，应该是application/json。响应类型是 application/vnd.sun.wadl+xml 但我预计响应类型是错误的，因为请求发送了错误的标头。
嗯，好吧。通常你应该有一个 OPTIONS 请求，然后是一个 GET 请求。要将 application/json 作为返回类型，您必须将相应的注释 @Produces({ MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML }) 添加到 java REST 资源类中的方法。

【解决方案2】：

我找到了解决方案。有几个步骤可以解决这个问题：

将 CORS 过滤器添加到 Glassfish 上的 Jersey servlet。
将 Angular 版本升级到 1.1.x（目前仍不稳定）
在您的资源中设置自定义标头。
享受工作应用程序。

非常感谢 Marcbaur 在这里帮助我。

【讨论】：