angularjs - http请求多浏览器的烦恼

Question

我正在使用 angularJs 在 laravel 5.1 中构建。

当用户点击一个按钮时，我想发送一个destroy request将其从数据库中删除，然后在完成后发送一个get request以获取新的数据现在已经被删除了。

所以我将我的方法附加到按钮上的 ng-click 事件，这有效，它点击了方法。

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

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

这是我的 Controller 代码，点击按钮删除时调用的方法是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 与此代码的交互方式有何不同？

Answer 1

很难根据您发布的参数进行判断，但仅根据您所说的这在 Safari 中完美运行，但在 Chrome 或 Firefox 中不起作用，听起来这可能是一个 CORS 问题。

Firefox 和 Chrome 对跨源请求的要求与 Safari 不同。此 destroy 操作的 Laravel api 端点是否与 Angular 应用位于同一位置？ API 返回什么 Access-Control-Allow-Origin header ？

尝试向 Laravel 添加如下内容，看看它是否使该 block 在这些浏览器中保持一致:

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)