Http запрашивает проблемы с несколькими браузерами

Я создаю 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 взаимодействует по-другому с этим кодом, который заставляет его работать?

Ответ 1

Трудно измерить параметры, которые вы опубликовали, но только исходя из того, что вы говорите, что это отлично работает в Safari, но не работает в Chrome или Firefox, похоже, что это может быть проблема CORS.

У Firefox и Chrome есть разные требования к запросам на перекрестный поиск, чем Safari. Является ли ваша конечная точка Laravel api для этого действия destroy, расположенного в том же месте, что и ваше приложение 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)

Ответ 2

Я думаю, это проблема CORS. И, кроме того, эта проблема обычно возникает, если вы отключаете свою клиентскую сторону со своей серверной части. Для решения таких проблем необходимо создать перед промежуточным программным обеспечением.

namespace App\Http\Middleware;

use Closure;

class BeforeMiddleware
{
  /**
  * Handle an incoming request.
  *
  * @param  \Illuminate\Http\Request  $request
  * @param  \Closure  $next
  * @return mixed
  */
 public function handle($request, Closure $next)
 {
    /** 
    * The access control allow origin and 
    * allow credential is set to * and true 
    * because i allow request from different domains
    * to hit the server
    */
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Credentials: false');
    header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
    header('Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization');

    if ($request->getMethod() == "OPTIONS") {
        $headers = array(
            'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE',
            'Access-Control-Allow-Headers'=> 'X-Requested-With, content-type',);
        return Response::make('', 200, $headers);
    }

    return $next($request);
 }
}

И на стороне angular добавить этот конфигурационный блок

app.config(['$httpProvider', function ($httpProvider) {

  $httpProvider.defaults.useXDomain = false;
  $httpProvider.defaults.withCredentials = false;
  delete $httpProvider.defaults.headers.common['X-Requested-With'];

}]);

Ответ 3

Если вы вернете значение в successCallback или errorCallback, возвращаемое значение будет использовано для разрешения promise. Попробуйте определить $q.deferred, который будет разрешен при получении $http sucess с данными.

$scope.deleteOpportunity = function() {
            var deferred = $q.defer();

            UBOService.destroy($scope.activeItem.id)
                .then(function successCallback(response) {
                    UBOService.get().then(function(response){
                        $scope.opportunities = response.data;
                        deferred.resolve(response.data);
                    };
                }, function errorCallback(response) {
                    $scope.error = response;
                });
        return deferred.promise;
}