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とは異なるクロスソース要求に対応しています。このdestroyアクションのLaravel APIエンドポイントは、Angularアプリと同じ場所にありますか？どのようなAccess-Control-Allow-OriginヘッダーはAPIを返しますか？

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)

Answer 2

を、私はそのCORSの問題を推測：Laravelに次のと、それはそれらのブラウザ間で、このブロックは、一貫性のある、それを作るかどうかを確認のようなものを追加すること

してみてください。さらに、クライアント側をサーバー側から切り離すと、通常この問題が発生します。このような問題を処理するには、ミドルウェアの前に作成する必要があります。

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

物事の角側にあなたがsuccessCallbackかerrorCallbackに値を返す場合、戻り値はpromiseを解決するのに使用されるこのconfigブロック

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

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

}]); 

Answer 3

を追加します。 $q.deferredを定義して、データでget $ httpが成功したときに解決されるようにしてください。

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