【问题标题】:Spring & AngularJS - connection with RESTful APISpring & AngularJS - 与 RESTful API 的连接
【发布时间】:2015-02-07 21:31:24
【问题描述】:

我的项目有一个奇怪的问题。我决定在 Spring 中编写服务器应用程序,并使用 AngularJS 编写前端。 在服务器端,我有一个简单的控制器,它从简单的实体返回一些简单的数据;)。它看起来像这样:

@RestController
public class ApiController
{
    @RequestMapping( value = "/getAllProfiles", method = RequestMethod.GET)
    public Entity getEntity()
    {
        Entity e = new Entity();
        e.setName( "myname" );
        return e;
    }
}

在前面,我有一个 Angulars 控制器,它看起来像:

var app = angular.module('app', []);

app.config(function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;   
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

app.controller('Hello', function ($scope, $http) {
    $http.get({
        method: 'GET',
        url: 'http://localhost:8080/getAllProfiles'
    }).success(function (data) {
        console.log('success', data)
        $scope.greeting = data;
    }).error(function(){
        console.log("something goes wrong");
    });
})

和html文件:

<html ng-app="app">
<head>
    <title>Hello AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
    <script src="view1.js"></script>
</head>
<body>
<div ng-controller="Hello">
    <p>The content is {{greeting.name}}</p>
</div>
</body>
</html>

当我启动服务器时,我连接到 localhost:8080/getAllProfiles 并且一切正常。我收到这样的 JSON {"name":"myname"}。但是,当我尝试从 Angular 端执行相同操作时,我收到 The content is - 来自服务器的空数据,当然,错误函数正在控制器中调用。我认为这可能是 CORS 问题,但我在服务器端和 Angular 端添加了过滤器,但没有帮助。 js控制台(我用的是Chrome)说:加载资源失败:服务器响应状态为404(未找到)

我真的不知道该怎么办。我想在这两个应用程序之间“交谈”,但我不能因此。 如果有人可以帮助我,我将非常感激。

【问题讨论】:

  • 这可能没什么区别,但是我看到你在http.get请求的配置中设置了一个GET方法名,你肯定不需要这一行,它已经是一个GET
  • 是的,我知道。此 http 的结构之间的更改不能解决问题。
  • 如果您检查了 CORS 不是问题,您是否也仔细检查了 a) spring 应用程序正在侦听 8080 和 b) 它没有绑定到的基本路径(即, 一些 /foo/getAllProfiles)?
  • 是的,Spring 应用程序在 8080 上,因为当我在 chrome - localhost:8080/getAllProfiles 中执行此操作时,我得到了服务器的答复。它从正面不起作用。路径不错,在上面的spring控制器中可以看到这个。

标签: angularjs spring rest


【解决方案1】:

如果 CORS 是 localhost 上的问题,那么您可以使用grunt-connect-proxy。 在你的 grunt 文件中定义:

proxies: [
                {
                    context: '/',
                    host: '127.0.0.1',
                    port: 8080,
                    https: false,
                    xforward: false
                }
            ]

不要忘记将 connext 代理任务添加到您的任务中。 网站上的一切都清楚地解释了。 这将解决本地主机中的跨域问题。 然后你可以在你的控制器中调用你的服务器:

$http.get({
        method: 'GET',
        url: '/getAllProfiles'
    })

它会起作用,因为 grunt 会在您的 Angular 应用程序端口上运行代理。

顺便说一句。 您是否尝试过通过单元测试来测试您的角度逻辑? 使用 $httpbackend 模拟与您的 Spring 应用程序完全相同的后端,您将看到结果。

【讨论】:

  • 不,我没有测试它。谢谢你,我会做的。你能详细介绍一下这个 grunt-connect 吗?我需要将它添加到我的 Angular 应用程序中并在一些配置中进行设置?
  • 你使用 grunt 吗?它是 grunt - 一个为你编译项目的工具。不知道有没有代理。
  • 我已将 Grunt 安装到我的项目中。我不知道,也许我做错了什么,但我使用了本教程gruntjs.com/getting-started 和您在上面帖子中提供的链接中的自述文件。它仍然不起作用。我将 WebStrom 用于我的前端应用程序,将 IntelliJ 用于服务器应用程序。当我从 WebStorm 测试我的休息服务时,它可以正常工作(工具-> 测试 RESTful 服务)。我有 Grunt,我有一个 Gruntfile,但问题没有解决。
  • 在启动 grunt 期间是否有消息,代理已启动?你能去你的应用程序端口 localhost:9000/getAllProfiles 看看数据吗?你用 $httpBackend 测试过吗?
  • 有趣。我从命令行运行 grunt serve,并得到:“正在运行“服务”任务服务器正在端口 9000 上运行......”我在 gruntfile 文件中指定代理为“代理:[{上下文:'/',主机:'127.0 .0.1', port: 8080, https: false, xforward: false }]", 不知道为什么不使用代理...
【解决方案2】:

好的,问题终于解决了。感谢 cyan 的帮助,Grunt 是一个解决方案。

我想为不想阅读此主题中所有内容的人描述此解决方案。 ;) 我想从某个 Angular 应用程序连接到我的 Spring REST API(2 个独立的应用程序),但由于本地主机上的代理问题,我无法做到这一点。我已经为我的 Angular 应用程序安装了 Grunt,配置了它,启动了服务器并尝试从中获取数据。它脱落了。 当然,需要服务器端的 CORS 过滤器。他们在这里描述https://spring.io/guides/gs/rest-service-cors/

我使用本教程对我有帮助: http://www.hierax.org/2014/01/grunt-proxy-setup-for-yeoman.html http://fettblog.eu/blog/2013/09/20/using-grunt-connect-proxy/ 以及来自青色的github链接。

【讨论】:

  • 我有完全相同的问题,我已经为我的 extJS 应用程序安装了 Grunt,并尝试在我的 Spring MVC(和安全)服务器应用程序上设置 CORS 过滤器,但它不起作用。如何检查服务器端的 CORS 过滤器?
猜你喜欢
  • 1970-01-01
  • 2015-12-07
  • 2011-10-17
  • 1970-01-01
  • 1970-01-01
  • 2021-06-11
  • 1970-01-01
  • 1970-01-01
  • 2015-07-04
相关资源
最近更新 更多