Question

我是初学者，我正在使用CRUD和AngularJS创建一个简单的Laravel 5系统。我在实现/ UPDATE功能（编辑数据）工作时遇到了问题。每次运行它时，我都会在浏览器控制台上出现此错误：

否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。起源＆＃39; http://mycrudapp-kkoyao.c9users.io＆＃39;因此不允许访问。响应的HTTP状态代码为500。*

这是我的html / form的代码：

    <body>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="addApp" ng-controller="addController">

        <h2>Edit Account</h2>

        <h4 class="modal-title" id="myModalLabel">Please fill in details</h4>

        <div class="modal-body">
            <form name="frmAccounts" ng-submit="submitForm(Account.id)" class="form-horizontal" novalidate="">

                <div class="form-group error">
                    <label for="inputEmail3" class="col-sm-3 control-label">Account Holder's Name</label>
                    <div class="col-sm-9">
                    <input type="text" class="form-control has-error" id="name" name="name" placeholder="Enter First and Last Name" 
                    ng-model="Account.acctName" ng-required="true">
                    <span class="help-inline" 
                    ng-show="frmAccounts.name.$invalid && frmAccounts.name.$touched">Name field is required.</span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-3 control-label">Bank Account Number</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="acctNum" name="acctNum" placeholder="Enter Bank Account Number" 
                            ng-model="Account.acctNum" ng-required="true">
                            <span class="help-inline" ng-show="frmAccounts.acctNum.$invalid && frmAccounts.acctNum.$touched">Please check your Bank Account Number.</span>
                        </div>
                </div>

                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-3 control-label">Bank Account Type</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="acctType" name="acctType" placeholder="Savings or Checking Account"  
                            ng-model="Account.acctType" ng-required="true">
                            <span class="help-inline" ng-show="frmAccounts.acctType.$invalid && frmAccounts.acctType.$touched">Please indicate bank account type.</span>
                        </div>
                </div>

                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-3 control-label">Bank Account Current Balance </label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="acctBalance" name="acctBalance" placeholder="Enter current balance"  
                            ng-model="Account.acctBalance" ng-required="true">
                            <span class="help-inline" ng-show="frmAccounts.acctBalance.$invalid && frmAccounts.acctBalance.$touched">Check Bank Account Balance</span>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" id="btn-save" ng-disabled="frmAccounts.$invalid">Save Account</button>

                </div>
            </form>
        </div>
  </div>

 <script included here, see below>
</body>
</html>

然后这是我的AngularJS脚本（包含在我的html页面下方的body标签中）：

    <script>

     // Defining angularjs application.
    var app = angular.module('addApp', []);
    // Controller function and passing $http service and $scope var.
    app.controller('addController', function($scope, $location, $http, $log, $window) {

        var url = $location.absUrl();
        $scope.url = $location.absUrl();

        $http.get(url + "/api")
        .then(function (response) {$scope.Account = response.data;}); //this part is working

        $scope.submitForm = function(id) {
        // Posting data to php file
        $http({
          method  : 'POST',
          url     : 'https://mycrudapp-kkoyao.c9users.io/api/accounts/' + id,
          data    : $scope.Account, 
          headers : {'Content-Type': 'application/x-www-form-urlencoded'} 
        })

          .success(function(response) {
            console.log(response);  
            location.reload();

        }).error(function(response) {
            console.log(response);
            alert('This is embarrassing. An error has occured. Please check the log for details');
        });

    });

</script>

开头的GET方法工作正常，数据被提取并显示在表单上。

但是当我点击＆＃34; Save＆＃34;按钮在我的脚本中调用submitForm()函数，没有任何反应，我在浏览器控制台（Chrome）上收到错误（见上文）。但是这个脚本经过编辑，来自我的CREATE一个新的入口功能，并且工作正常。所以我不确定是什么问题。

无论如何，这是我的Laravel代码：

Laravel路线：

Route::post('/api/accounts/{id}', 'AccountCtrl@update');

Laravel控制器：

 public function update(Request $request, $id) {

    $account = Account::find($id);

    $account->acctName = $request->input('acctName');
    $account->acctNum = $request->input('acctNum');
    $account->acctType = $request->input('acctType');
    $account->acctBalance = $request->input('acctBalance');
    $account->save();

}

我认为问题出在我的Laravel控制器中，但不确定如何修复它。

另外，如何修复DELETING数据的代码？

我很抱歉这个漫长而凌乱的帖子，但这是我第一次来这里，我真的需要帮助。非常感谢你。

Answer 1

尝试将下一个标题添加到您的网络服务中：

 header("Access-Control-Allow-Origin", "*")

Answer 2

这是一个CORS问题，可能是因为您的浏览器正在发送预检（OPTIONS）请求。快速搜索：https://github.com/barryvdh/laravel-cors

编辑：OPTIONS请求应返回200 OK

如何使用angularJS和Laravel更新数据记录？

这是我的html / form的代码：

然后这是我的AngularJS脚本（包含在我的html页面下方的body标签中）：

Laravel路线：

Laravel控制器：

2 个答案: