angularjs – Http请求多浏览器的烦恼

发布时间：2020-12-17 08:08:35 所属栏目：安全来源：网络整理

导读：我正在建立在laravel 5.1使用angularJs。当用户单击按钮时，我想发送一个销毁请求，从数据库中删除它，然后当完成发送一个获取请求以获取新的数据，现在已被删除。所以我把我的方法附加到一个按钮上的一个ng-click事件，这是有效的，它触发了该方法。然后

我正在建立在laravel 5.1使用angularJs。

当用户单击按钮时，我想发送一个销毁请求，从数据库中删除它，然后当完成发送一个获取请求以获取新的数据，现在已被删除。

所以我把我的方法附加到一个按钮上的一个ng-click事件，这是有效的，它触发了该方法。

然后我运行一个.destroy请求。在.destroy的.then()方法中，我想要调用另一个具有.get请求的方法。

这在Safari中完美无缺，但在Chrome或Firefox中不起作用。

这是我的代码为控制器，该方法被称为按钮点击删除是deleteOpportunity()：

$scope.getOpportunities = function()
    {
        UBOService.get()
            .then(function successCallback(responsed) {
                $scope.opportunities = responsed.data;
            },function errorCallback(response) {
                $scope.error = response;
            });
    }
$scope.deleteOpportunity = function()
    {

                UBOService.destroy($scope.activeItem.id)
                    .then(function successCallback(response) {
                        $scope.getOpportunities();

                        return false;
                    },function errorCallback(response) {
                        $scope.error = response;
                    });

    }

我的服务代码：

app.service('UBOService',function($http) {

    return {
        get : function() {
            return $http.get('/api/user-booked-opportunities');
        },destroy : function(id) {

            return $http.delete('/api/user-booked-opportunities/' +  id);
        }
    }
})

我做错了吗？有没有我失踪的东西？ Safari与这段代码的区别是什么？

很难从您发布的参数中测量出来，但只是根据您的说法，您可以在Safari中完美运行，但在Chrome或Firefox中不起作用，听起来可能是CORS问题。

Firefox和Chrome对于跨源请求而言对Safari的要求不同。您的Laravel api终点是否与您的Angular应用程序位于相同的位置？什么Access-Control-Allow-Origin头是API返回的？

尝试向Laravel添加以下内容，看看它是否使这个块在这些浏览器中保持一致：

App::before(function($request) {
  // Enable CORS 
  // In production,replace * with http://yourdomain.com 
  header("Access-Control-Allow-Origin: *");
  header('Access-Control-Allow-Credentials: true');

  if (Request::getMethod() == "OPTIONS") {
    // The client-side application can set only headers allowed in Access-Control-Allow-Headers
    $headers = [
      'Access-Control-Allow-Methods' => 'POST,GET,OPTIONS,PUT,DELETE','Access-Control-Allow-Headers' => 'X-Requested-With,Content-Type,X-Auth-Token,Origin,Authorization'
    ];
    return Response::make('You are connected to the API',200,$headers);
  }
});

(^ source)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!