Question

哇，我很茫然，已经适应了好几天。我真的可以帮忙......

问题： 当我在Angular Javascript中查询我的api时，我没有得到任何数据作为回应。我知道API正在运行，但我发送到视图的 $ scope.data 没有附加任何内容，其他 $ scope 变量确实有效。尝试使用Angular $ http 资源和 Restangular AngJS服务link解决问题。以下是我的问题的详细信息，并感谢任何建议。

CURRENT CONFIG： 我正在开发一个使用Laravel 5.1作为RESTful API的站点。它位于Homestead的本地Vagrant实例上，URL是＆gt;＆gt; http://api.platspl.at:8000/

我知道它有效，因为如果我去＆gt;＆gt; api.platspl.at:8000/tracks，我得到（缩写）：

[{"id":1,"name":"Track 1 Name","slug":"track-1-name",...,"updated_at":"2016-01-31 15:30:56"},{"id":2,...,"updated_at":"2016-01-31 15:30:56"},{"id":3,...,"updated_at":"2016-01-31 15:30:56"}]

这是控制器的代码：

    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问题和数据库查询，既没有修复任何东西。

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

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

我正在使用的视图位于/ resources / views / app /和 ALL 所需的AngularJS文件位于Laravel安装的公共目录中。以下是视图中的一些代码，后面是视图中引用的2个Angular Files。

查看：

    <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>

APP.JS：

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

AppCtrl.JS：

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' } ];
//        })
//    }
//]);

我尝试使用的所有JS编码都被注释掉了。再次感谢任何建议！

Answer 1

这些是非常难以调试的问题。

确保使用工具向RESTful API发出请求比如fiddler。还要检查您是否收到回复。
如果请求没有出去，请尝试使用普通旧版 $http.get('url')
如果您收到回复，请检查response.status和response.data。 Here are the docs。

如果您可以导航到URL并获取JSON，那么您的API肯定有用。

Answer 2

有罪方＆gt;＆gt; Nginx ＆amp;的 CORS

在尝试了许多建议的解决方案之后，这就是我想出来的......

Laravel API控制器：

添加

use Illuminate\Http\Response;

和

public function index() { $data = DB::table('tracks')->where('published', 1)->get(); return response($data)->header('Access-Control-Allow-Origin', '*') ->header('Access-Control-Allow-Credentials', 'true') ->header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS') ->header('Access-Control-Allow-Headers', 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'); }

角度控制器：

'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响应时，所有内容都会卡入到位。

我希望这对某人有所帮助，再次感谢Wilmer S！

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

2 个答案: