Ad

Http Requests Multi Browser Troubles

- 1 answer

I am building in laravel 5.1 using angularJs.

When the user clicks a button, I want to send a destroy request to delete it from the database and then when thats completed send a get request to get the new data now that one has been deleted.

So I attached my method to an ng-click event on a button, this works, it hits the method.

I then run a .destroy request. Inside the .then() method of that .destroy I want to then call another method which has a .get request.

This works perfectly in Safari, but doesn't work in Chrome or Firefox.

Here is my code for the controller, the method that is called on button click to delete is 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;
                    });

    }

My service code:

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);
        }
    }
})

Am I doing something wrong? Is there something I am missing? How does Safari interact differently with this code which makes it work?

Ad

Answer

It's tough to gauge from the parameters you posted, but just based on you saying that this works perfectly in Safari, but doesn't work in Chrome or Firefox, it sounds like this could be a CORS issue.

Firefox and Chrome have different requirements for cross-origin requests than Safari. Is your Laravel api endpoint for this destroy action located at the same location as your Angular app? What Access-Control-Allow-Origin header is the API returning?

Try adding something like the following to Laravel and see if it makes it this block consistent across those browsers:

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)

Ad
source: stackoverflow.com
Ad