Question

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

@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并且一切正常。我收到了像{"name":"myname"}这样的JSON。但是，当我尝试从Angular方面做同样的事情时，我收到The content is - 来自服务器的空数据，当然，错误函数正在控制器中调用。我认为它可能是一个CORS问题，但我在服务器端添加了过滤器，在Angular方面，它没有帮助。 js控制台（我用Chrome浏览器）说：无法加载资源：服务器响应状态为404（未找到）

我真的不知道如何处理这件事。我想＆＃34;谈谈＆＃34;这两个应用程序之间，但我不能因为这个。如果有人可以帮助我，我会非常感激。

Answer 1

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

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

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

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

它会工作，因为grunt会在你的角度应用程序端口上运行代理。

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

Answer 2

好的，最后问题已经解决了。感谢青色的帮助，Grunt是一个解决方案。

我想为那些不想阅读本主题中的所有内容的人描述此解决方案。 ;）我想从一些Angular应用程序连接到我的Spring REST API（2个独立的应用程序），但由于我的localhost上的代理问题，我无法做到这一点。我为我的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链接。

春天＆amp; AngularJS - 与RESTful API的连接

2 个答案: