javascript - 带有 laravel 的 angular js $http post

Question

问题

当我尝试发布数据时出现错误。当然我做错了什么，我也是 Angular 新手。当我执行 GET 时一切正常，但我不确定如何执行 POST。

Controller

myApp.controller('createListController', ['$scope', '$log', '$http',
    function($scope, $log, $http){
        $http({
            method: 'POST',
            url: 'http://localhost:8888/lists',
            data: $scope.name
        })
    }]);

HTML

<form method="post" action="" >
    <label>List name</label>
    <input type="text" ng-model="name" name="name"  class="form-control" placeholder="Type list name" />
    <button type="submit" ng-model="submit" name="submit"  class="btn btn-primary form-control">Add list</button>
</form>

Laravel rout.php

Route::group(['middleware' => 'cors'], function () {
    Route::get('lists', 'ListsController@index');
    Route::post('lists', 'ListsController@store');
});

Laravel 中间件

class Cors
{
    public function handle($request, Closure $next)
    {
        $response = $next($request);
        $response->headers->set('Access-Control-Allow-Origin', '*');
        $response->headers->set(
            'Access-Control-Allow-Headers',
            'Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since'
        );
        $response->headers->set('Access-Control-Allow-Credentials', 'true');
        $response->headers->set('Access-Control-Allow-Methods', '*');
        return $response;
    }
}

Laravel 内核.php

    protected $routeMiddleware = [
        'cors' =>  \App\Http\Middleware\Cors::class,
    ];
}

试图解决

myApp.controller('createListController', ['$scope', '$log', '$http',
    function($scope, $log, $http){
        if ($scope.submit == true){

        $http({
            method: 'POST',
            url: 'http://localhost:8888/lists',
            data: {name: 'text'}
        })

        .success(function () {
            console.log('true');

        })
        .error(function(){
            console.log('false');
        })
        }

    }]);

但它也不起作用。我不知道我做错了什么以及如何正确发布数据..

错误信息

来自控制台的错误:XMLHttpRequest 无法加载 localhost:8888/lists。请求的资源上不存在“Access-Control-Allow-Origin” header 。起源“本地主机”；因此不允许访问。

问题

我如何解决这个错误并使用 laravel 获取 angular js $http post？

我的看法

我认为 Angular Controller 有问题，它可能无法从表单或类似的东西获取数据。

Answer 1

解决方案

我自己解决了。一开始我让我的 Angular Controller 正常工作:

myApp.controller('createListController', ['$scope', '$log', '$http',
    function($scope, $log, $http ){

          $scope.addList = function () {
            var list = {
                name: $scope.listname
            };

        $http({
            method: 'POST',
            url: 'http://localhost/anydocopy/public/lists',
            data: list
        })

            .success(function () {
               console.log('true');
            })
            .error(function(){
                console.log('false');
            })
    }

    }]);

在第 2 次，我将 ng-model 参数设置为输入文本，将 ng-click 参数设置为按钮:

<label>List name</label>
<input type="text" ng-model="listname" class="form-control" placeholder="Type list name" />
<button type="submit" ng-click="addList()" name="submit"  class="btn btn-primary form-control">Add list</button>

在 3rd 使用 POST 方法域不能不同(至少在 Angular 上)，所以我不使用 localhost:8888，而是使用完整路径 localhost/folder/.. 它对我有用。现在我可以将数据从前端发布到后端。