使用 Angularjs 从 Grails 后端获取 JSON 数据答案

【问题标题】：Getting JSON data from Grails backend using Angularjs使用 Angularjs 从 Grails 后端获取 JSON 数据
【发布时间】：2013-10-23 19:35:28
【问题描述】：

我有以下问题。我在 Grails 中有控制器，它以 Json 格式返回列表：

render([tweets: tweets.take(2).collect { tweet -> [id: tweet.id, content: tweet.tweetContent]}] as JSON)

这是我的 UrlMapping：

"/tweets/"(controller: "tweets", parseRequest: true) {
        action = [GET: "list"]

所以当我在任何浏览器中打开这个 url 时，我会得到 JSON 格式的元素列表：

{"tweets":[{"id":375238019298914304,"content":"@RonNegrita @Paolah_96 jajajajajajajajaja pues ale Negrita q nos lo has xk este del Tuit prima JAJAJAHAHAHAHA"},{"id":375238020360048640,"content":"My 38 Life Goals for next 10 years. Brewery's, Alabama Football, Concerts, Companies, Kids, Fiji, & more: http://t.co/behxfnCo5t"}]}

然后我尝试使用 Angularjs 在 HTML 页面中获取这些元素。这是我的html页面的简单代码：

<!doctype html>
<html lang="en" ng-app id="ng-app">
<head>
<title>Page Title</title>
<script src="js/angular.js"></script>
<script>
function PostsCtrlAjax($scope, $http)
{
$scope.tweets = []
$http.get('http://localhost:8080/trutto-api/tweets/').success(function(data)
{
$scope.tweets = data; // response data 
});
}
</script>
</head>
<body>
<div id="ng-app" ng-app ng-controller="PostsCtrlAjax"> 
<li ng-repeat="tweet in tweets>{{tweet.id}} - {{tweet.content}}</li>
</h2>
</div>
</body>
</html>

当我尝试在 Chrome 浏览器中获取数据时，出现以下错误：

"Xml http request cannot load http://localhost:8080/trutto-api/tweets/. Original null is not allowed by access-control-allow-origin"

我在这里发现了有关此错误的问题，它建议使用以下命令启动 Chrome：

"- allow-file-access-from-files".

我试过了 - 它不起作用，返回同样的错误。然后我在 Glassfish 服务器上试了一下 -> 在 Chrome 中打开会导致同样的错误。

在 Mozilla Firefox 中打开会导致以下错误：

SyntaxError: JSON.parse: unexpected end of data.

我应该如何解决它？提前谢谢你。

【问题讨论】：

成功回调中不应该是$scope.tweets = data.tweets;吗？
试图改变，得到同样的错误。

标签： java json http angularjs grails

【解决方案1】：

这是一个 CORS 问题。使用this plugin 解决问题。基本上，按照您的本地开发设置方式，ajax 调用认为您正在为请求调用不同的源（域），这是不允许的。

【讨论】：

谢谢！有用。我得到 JSON 对象，它没有显示在 html 页面上，但这是另一个问题 :)