我有一个非常简单的Spring Rest后端，它返回JSON数据。静态URL在我的浏览器中像这样运行：
http://localhost:8080/abc/runlist
它像这样返回数据：
[
{"stock_num":"KOH19","damage":"Toronto (Oshawa)"},
{"stock_num":"AZ235","damage":"Toronto (Oshawa)"},
...
]
我有一个独立的html页面，它不属于我的Web应用程序。我只想测试一下我的角度代码是否正在获取数据，然后遍历它。
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/abc/runlist")
.success(function (response) {$scope.names = response.records;});
});
</script>
yo yo
</body>
</html>
为什么不起作用？我在Spring遇到了一些东西，您需要实现一个称为CORS的东西。我是那样做的，但还是一无所获：
@Component
public class SimpleCORSFilter implements Filter {
public void doFilter(ServletRequest req, ServletResponse res, FilterChain
chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS,
DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
chain.doFilter(req, res);
}
public void init(FilterConfig filterConfig) {}
public void destroy() {}
}
尝试类似的东西：
js：
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/abc/runlist")
.success(function (response){
$scope.names = records;
});
});
html：
<ul>
<li ng-repeat="x in records">
{{x}}
</li>
</ul>
更多参数html：
<ul>
<li ng-repeat="x in records">
{{x.myName}}
{{x.myNumber}}
</li>
</ul>
希望我有所帮助。
尝试将return放在$ http.get的前面
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
return $http.get("http://localhost:8080/abc/runlist").success(function (response) {
$scope.names = response;
});
});
</script>
然后在您的视图中使用点符号表示您要显示的属性，例如
{{x.stock_num}}
知道了！有2个修复程序：
首先，我必须实现CORS过滤器和类，以免出现此错误：
org.apache.catalina.connector.ClientAbortException: java.io.IOException: An established connection was aborted by the software in your host machine
at org.apache.catalina.connector.OutputBuffer.realWriteBytes(OutputBuffer.java:393)
at org.apache.tomcat.util.buf.ByteChunk.flushBuffer(ByteChunk.java:426)
at org.apache.tomcat.util.buf.ByteChunk.append(ByteChunk.java:339)
at org.apache.catalina.connector.OutputBuffer.writeBytes(OutputBuffer.java:418)
at org.apache.catalina.connector.OutputBuffer.write(OutputBuffer.java:406)
第二，例如复印机的警告！我从W3Schools复制了上面的简单示例，W3Schools是一个很棒的教程网站，例如：
$http.get("http://localhost:8080/abc/runlist")
.success(function (response) {$scope.names = response.records;});
注意响应末尾的.records。不需要。当我摘下它时，它就起作用了。
[很可能是您使用file://方案引起的。有关推理，请参见链接的问题here上的中间项目符号。基本上，对于file://请求，您的来源将为空，这将导致XmlHttpRequest失败，而$http依赖。
尝试一下：
$http.get("http://localhost:8080/abc/runlist")
.success(function (response, data, headers, status, config) {
$scope.names = response.names;
});
希望它能正常工作。 ：）