RESTful API 没有显示在简单的 AngularJS 控制器中答案

【问题标题】：RESTful API not showing up with simple AngularJS controllerRESTful API 没有显示在简单的 AngularJS 控制器中
【发布时间】：2016-07-11 23:02:03
【问题描述】：

好的，我会尽量简单地解释一下。我已经设置了一个运行 RESTful API 的 Node 和 express 以及 mySQL 服务器，该服务器具有常见的 get、post、put、delete 工作正常，因为我可以在 Postman 中使用它们进行测试并在 Chrome 中查找它。目前这一切都在我的机器上本地运行。我有一个运行 REST api 的 Ubuntu 机器。当我在 chrome 中查询时，我得到了我正在使用的字段的预期输出。

（示例请求“http://192.168.239.130:1337/api/plates/”）给我这个。

{
"Plates": [
    {
        "lot_number": "P234",
        "plate_number": "NGE-781",
        "date_and_time": "2016-07-08T21:14:31.000Z"
    },
    {
        "lot_number": "P234",
        "plate_number": "FEB-423",
        "date_and_time": "2016-07-08T21:26:08.000Z"
    },
    {
        "lot_number": "P234",
        "plate_number": "SEB-623",
        "date_and_time": "2016-07-08T21:26:20.000Z"
    },
    {
        "lot_number": "P234",
        "plate_number": "ZEB-683",
        "date_and_time": "2016-07-08T21:30:59.000Z"
    },
    {
        "lot_number": "P234",
        "plate_number": "FEW-083",
        "date_and_time": "2016-07-08T21:31:57.000Z"
    },
    {
        "lot_number": "L323",
        "plate_number": "JEQ-324",
        "date_and_time": "2016-07-11T18:59:03.000Z"
    }
   ]
 }

这些只是打印到屏幕上的一些示例 mySQL 数据。正如我所希望的那样工作。我的问题是当我尝试使用 angular 脚本制作一个简单的 html 页面来尝试打印它不想打印时。我得到的只是一个空白页。我尝试使用其他 api 在线运行我的代码。用我将在下面发布的相同代码打印出来没有问题。

<!DOCTYPE html>
<html>
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="platesCtrl">

{{plates}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('platesCtrl', function($scope, $http) {
   $http.get("http://192.168.239.130:1337/api/plates")
   .then(function (response) {$scope.plates = response.data;});
});
</script>

</body>
</html>

就像我说的那样，使用任何其他在线 API 运行它......我的不是它与它有关的东西是本地的吗？即使像我说的那样，我可以在浏览器中将上述地址运行到 ....api/plates API 没有问题并让 JSON 吐出。

任何知识将不胜感激

谢谢。

【问题讨论】：

Chrome 中的网络标签显示了什么？这可能是一个跨域问题。
如果使用promise的错误回调，是否有错误信息？ app.controller('platesCtrl', function($scope, $http) { $http .get("http://192.168.239.130:1337/api/plates") .then( function (response) { $scope.plates = response.data; }, function (error) { console.log('Response error: ', error); }, ); });
所以我完全错过了控制台所说的内容。 'Access-control-Allow-Origin' 缺失。
我在每个 API 调用的每个 Res 中添加了 Access-control-Allow-Origin 标头到我的 Node 和 Express 服务器中......现在可以修复它。是否有更多通用方法可以对每个 API 执行此操作，这样我就不必添加到每个 API 中？
在 npm 上查看 CORS 包：github.com/expressjs/cors

标签： javascript mysql angularjs api rest

【解决方案1】：

好的，我自己来回答。来自其他一些用户的 cmets 的想法。我检查了控制台并收到一个错误，指出我有一个跨域问题并且缺少“Access-control-Allow-Origin”。我能够修复进入我的 API 调用函数并添加

res.header("Access-Control-Allow-Origin", "*");

到每个 API 调用。现在这可行，但我确信有一种更优雅的方式来实现同样的事情。

感谢您的帮助。

【讨论】：