Http请求多浏览器问题

Question

我在建设中laravel 5.1使用angularJs.

当用户单击一个按钮时,我想发送一个destroy request从数据库中删除它,然后当它完成时发送一个get request来获取新数据,现在已经删除了一个.

所以我将我的方法附加到一个按钮上的ng-click事件,这是有效的,它命中了方法.

然后我跑了.destroy request.在我想要的.then()方法内部.destroy然后调用另一个有一个方法.get request.

这在Safari中完美运行,但在Chrome或Firefox中无效.

Here is my code for the 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 不同。此操作的 Laravel api 端点是否destroy与 Angular 应用位于同一位置？Access-Control-Allow-OriginAPI 返回什么标头？

尝试向 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);
  }
});

（^来源）