AngularJS中的API查询不返回任何内容，Laravel 5.1 RESTful API，AngularJS（1.5/1.4.9）前端_Angularjs_Api_Nginx_Laravel 5

AngularJS中的API查询不返回任何内容，Laravel 5.1 RESTful API，AngularJS（1.5/1.4.9）前端

angularjs api nginx laravel-5

AngularJS中的API查询不返回任何内容，Laravel 5.1 RESTful API，AngularJS（1.5/1.4.9）前端,angularjs,api,nginx,laravel-5,Angularjs,Api,Nginx,Laravel 5,哇，我不知所措，好几天来一直在装这个。我真的需要一些帮助问题：当我在AngularJavaScript中查询api时，我没有得到任何数据作为响应。我知道API正在工作，但是$scope.data没有附加任何内容，我正在发送到视图中，其他$scope变量可以工作。已尝试使用Angular$http资源和Restangular AngJS服务修复此问题。以下是我问题的细节，谢谢你的建议当前配置：我正在开发一个使用Laravel5.1实现RESTful API的站点。它位于Homestead的

哇，我不知所措，好几天来一直在装这个。我真的需要一些帮助

问题： 当我在AngularJavaScript中查询api时，我没有得到任何数据作为响应。我知道API正在工作，但是$scope.data没有附加任何内容，我正在发送到视图中，其他$scope变量可以工作。已尝试使用Angular$http资源和Restangular AngJS服务修复此问题。以下是我问题的细节，谢谢你的建议

当前配置： 我正在开发一个使用Laravel5.1实现RESTful API的站点。它位于Homestead的一个本地流浪者实例上，URL为>>

我知道它是有效的，因为如果我转到>>api.platspl.at:8000/曲目，我会得到（缩写）：

以下是控制器的代码：

    public function index()
{
    // Using Model
    //$data = Track::where('published', 1)->get();
    //$data->toJson();
    //return $data;

    // Using DB
    $data = DB::table('tracks')->where('published', 1)->get();
    return response()->json($data);
}

正如您所见，我试图通过使用Laravel模型和和数据库查询，两者都没有修复任何问题

我使用Angular JS作为前端，这就是我的问题所在。当我转到platspl.at:8000/时，我收到Angular应用程序作为响应，由Laravel中的routes.php文件定义。以下是路线代码：

Route::get('/', function() { return View::make('app.index'); });

我使用的视图位于/resources/views/app/中，所有必要的AngularJS文件都位于Laravel安装的公共目录中。下面是视图中的一些代码，后面是视图中引用的2个角度文件
查看：

<html lang="en" ng-app="PlatSplatApp"> <head>...</head> <body ng-controller="AppCtrl"> <div class="page-header"> <h1>PlatSpl.at - {{ user }}</h1> </div> <p>1 + 2 = {{ 1 + 2 }}</p> <div ng-repeat="track in tracks"> <h3>{{ track.name }}</h3> <p>{{ track.description }}</p> </div> </body> <script type="text/javascript" src="<?= asset('app/bower_components/angular/angular.js') ?>"></script> ... <script type="text/javascript" src="<?= asset('app/bower_components/restangular/src/restangular.js') ?>"></script> <script type="text/javascript" src="<?= asset('app/scripts/app.js') ?>"></script> <script type="text/javascript" src="<?= asset('app/scripts/controllers/appCtrl.js') ?>"></script>

angular.module('PlatSplatApp', ['restangular']);

angular.module('PlatSplatApp', []) .controller('AppCtrl', [ '$scope', function($scope, Restangular) { // Set User $scope.user = 'User Name'; //Create a Restangular object var data = Restangular.allUrl('tracks', 'http://api.platspl.at:8000'); // make query and return a promise. data.getList().then(function(response) { $scope.tracks = response; }); //$scope.tracks = Restangular.allUrl('tracks', 'http://api.platspl.at:8000').getList().$object; //$scope.tracks = Restangular.allUrl('allTracks', 'http://api.platspl.at:8000/tracks').getList().$object; //var data = Restangular.allUrl('tracks', 'http://api.platspl.at:8000/tracks').getList(); //var data = Restangular.oneUrl('tracks', 'http://api.platspl.at:8000/tracks/by/1').get(); //$scope.tracks = data; //$scope.tracks = [{'name': 'error', 'description': 'error'}]; }]); // .controller('AppCtrl', [ '$scope', '$http', // function ($scope, $http) { // $scope.user = 'User Name'; // $http({ // method: 'GET', // url: 'http://api.platspl.at:8000/tracks', // }).then(function(result) { // $scope.tracks = result.data; // }, function (error) { // $scope.tracks = [ { 'name': 'error', 'description': 'error' } ]; // }) // } //]);

'use strict'; angular.module('PlatSplatApp', []) .controller('AppCtrl', [ '$scope', '$http', function ($scope, $http) { var onStatsComplete = function(response) { $scope.tracks = response.data; }; $http.get("http://api.platspl.at:8000/tracks") .then(onStatsComplete); } ]);
AppCtrl.JS:

<html lang="en" ng-app="PlatSplatApp"> <head>...</head> <body ng-controller="AppCtrl"> <div class="page-header"> <h1>PlatSpl.at - {{ user }}</h1> </div> <p>1 + 2 = {{ 1 + 2 }}</p> <div ng-repeat="track in tracks"> <h3>{{ track.name }}</h3> <p>{{ track.description }}</p> </div> </body> <script type="text/javascript" src="<?= asset('app/bower_components/angular/angular.js') ?>"></script> ... <script type="text/javascript" src="<?= asset('app/bower_components/restangular/src/restangular.js') ?>"></script> <script type="text/javascript" src="<?= asset('app/scripts/app.js') ?>"></script> <script type="text/javascript" src="<?= asset('app/scripts/controllers/appCtrl.js') ?>"></script>

angular.module('PlatSplatApp', ['restangular']);

angular.module('PlatSplatApp', []) .controller('AppCtrl', [ '$scope', function($scope, Restangular) { // Set User $scope.user = 'User Name'; //Create a Restangular object var data = Restangular.allUrl('tracks', 'http://api.platspl.at:8000'); // make query and return a promise. data.getList().then(function(response) { $scope.tracks = response; }); //$scope.tracks = Restangular.allUrl('tracks', 'http://api.platspl.at:8000').getList().$object; //$scope.tracks = Restangular.allUrl('allTracks', 'http://api.platspl.at:8000/tracks').getList().$object; //var data = Restangular.allUrl('tracks', 'http://api.platspl.at:8000/tracks').getList(); //var data = Restangular.oneUrl('tracks', 'http://api.platspl.at:8000/tracks/by/1').get(); //$scope.tracks = data; //$scope.tracks = [{'name': 'error', 'description': 'error'}]; }]); // .controller('AppCtrl', [ '$scope', '$http', // function ($scope, $http) { // $scope.user = 'User Name'; // $http({ // method: 'GET', // url: 'http://api.platspl.at:8000/tracks', // }).then(function(result) { // $scope.tracks = result.data; // }, function (error) { // $scope.tracks = [ { 'name': 'error', 'description': 'error' } ]; // }) // } //]);

'use strict'; angular.module('PlatSplatApp', []) .controller('AppCtrl', [ '$scope', '$http', function ($scope, $http) { var onStatsComplete = function(response) { $scope.tracks = response.data; }; $http.get("http://api.platspl.at:8000/tracks") .then(onStatsComplete); } ]);

我尝试使用的所有JS代码都被注释掉了。再次感谢您的建议
这些问题很难调试

确保使用工具将请求发送到RESTful API 喜欢还要检查您是否收到了回复

如果请求没有发出，那么尝试使用纯旧的
$http.get（'url'）

如果收到响应，请检查response.status和response.data
如果您可以导航到URL并获取JSON，那么您的API肯定可以工作
犯罪方>Nginx和CORS
在尝试了许多建议的解决方案后，这就是我想到的
Laravel API控制器：

<html lang="en" ng-app="PlatSplatApp"> <head>...</head> <body ng-controller="AppCtrl"> <div class="page-header"> <h1>PlatSpl.at - {{ user }}</h1> </div> <p>1 + 2 = {{ 1 + 2 }}</p> <div ng-repeat="track in tracks"> <h3>{{ track.name }}</h3> <p>{{ track.description }}</p> </div> </body> <script type="text/javascript" src="<?= asset('app/bower_components/angular/angular.js') ?>"></script> ... <script type="text/javascript" src="<?= asset('app/bower_components/restangular/src/restangular.js') ?>"></script> <script type="text/javascript" src="<?= asset('app/scripts/app.js') ?>"></script> <script type="text/javascript" src="<?= asset('app/scripts/controllers/appCtrl.js') ?>"></script>

angular.module('PlatSplatApp', ['restangular']);

angular.module('PlatSplatApp', []) .controller('AppCtrl', [ '$scope', function($scope, Restangular) { // Set User $scope.user = 'User Name'; //Create a Restangular object var data = Restangular.allUrl('tracks', 'http://api.platspl.at:8000'); // make query and return a promise. data.getList().then(function(response) { $scope.tracks = response; }); //$scope.tracks = Restangular.allUrl('tracks', 'http://api.platspl.at:8000').getList().$object; //$scope.tracks = Restangular.allUrl('allTracks', 'http://api.platspl.at:8000/tracks').getList().$object; //var data = Restangular.allUrl('tracks', 'http://api.platspl.at:8000/tracks').getList(); //var data = Restangular.oneUrl('tracks', 'http://api.platspl.at:8000/tracks/by/1').get(); //$scope.tracks = data; //$scope.tracks = [{'name': 'error', 'description': 'error'}]; }]); // .controller('AppCtrl', [ '$scope', '$http', // function ($scope, $http) { // $scope.user = 'User Name'; // $http({ // method: 'GET', // url: 'http://api.platspl.at:8000/tracks', // }).then(function(result) { // $scope.tracks = result.data; // }, function (error) { // $scope.tracks = [ { 'name': 'error', 'description': 'error' } ]; // }) // } //]);

'use strict'; angular.module('PlatSplatApp', []) .controller('AppCtrl', [ '$scope', '$http', function ($scope, $http) { var onStatsComplete = function(response) { $scope.tracks = response.data; }; $http.get("http://api.platspl.at:8000/tracks") .then(onStatsComplete); } ]);
加
及
角度控制器：

<html lang="en" ng-app="PlatSplatApp"> <head>...</head> <body ng-controller="AppCtrl"> <div class="page-header"> <h1>PlatSpl.at - {{ user }}</h1> </div> <p>1 + 2 = {{ 1 + 2 }}</p> <div ng-repeat="track in tracks"> <h3>{{ track.name }}</h3> <p>{{ track.description }}</p> </div> </body> <script type="text/javascript" src="<?= asset('app/bower_components/angular/angular.js') ?>"></script> ... <script type="text/javascript" src="<?= asset('app/bower_components/restangular/src/restangular.js') ?>"></script> <script type="text/javascript" src="<?= asset('app/scripts/app.js') ?>"></script> <script type="text/javascript" src="<?= asset('app/scripts/controllers/appCtrl.js') ?>"></script>

angular.module('PlatSplatApp', ['restangular']);

angular.module('PlatSplatApp', []) .controller('AppCtrl', [ '$scope', function($scope, Restangular) { // Set User $scope.user = 'User Name'; //Create a Restangular object var data = Restangular.allUrl('tracks', 'http://api.platspl.at:8000'); // make query and return a promise. data.getList().then(function(response) { $scope.tracks = response; }); //$scope.tracks = Restangular.allUrl('tracks', 'http://api.platspl.at:8000').getList().$object; //$scope.tracks = Restangular.allUrl('allTracks', 'http://api.platspl.at:8000/tracks').getList().$object; //var data = Restangular.allUrl('tracks', 'http://api.platspl.at:8000/tracks').getList(); //var data = Restangular.oneUrl('tracks', 'http://api.platspl.at:8000/tracks/by/1').get(); //$scope.tracks = data; //$scope.tracks = [{'name': 'error', 'description': 'error'}]; }]); // .controller('AppCtrl', [ '$scope', '$http', // function ($scope, $http) { // $scope.user = 'User Name'; // $http({ // method: 'GET', // url: 'http://api.platspl.at:8000/tracks', // }).then(function(result) { // $scope.tracks = result.data; // }, function (error) { // $scope.tracks = [ { 'name': 'error', 'description': 'error' } ]; // }) // } //]);

'use strict'; angular.module('PlatSplatApp', []) .controller('AppCtrl', [ '$scope', '$http', function ($scope, $http) { var onStatsComplete = function(response) { $scope.tracks = response.data; }; $http.get("http://api.platspl.at:8000/tracks") .then(onStatsComplete); } ]);
当我继续在站点上工作时，我可能会考虑这个解决方案，但是当我将标题添加到JSON响应时，一切都很顺利

我希望这能帮助一些人，再次感谢威尔默S
谢谢威尔默的建议。最后，我使用了FireFox检查器特性rt。单击并“检查元素”。在NET下，我发现以下错误：跨源请求被阻止：同一源策略不允许读取位于的远程资源。（原因：缺少CORS标头“访问控制允许原点”）。再次感谢！