プリフライトオプションAnglesJSによるリクエストはChromeで動作していませんか？

Question

私は、AngularJSを使って簡単なアプリケーションを開発しました。ホストはhereです。私はLaravelで開発したAPIを消費しています。hereがホストされています。 Firefoxを使ってアプリケーションにログインしようとするとうまくいきます。私のAPIは飛行前のOPTIONSリクエストを受け取り、200 OKで応答します。 。クロムは、プリフライトOPTIONS要求を送信したときに最後にPOSTリクエストトークンを生成し、ユーザーがログインしている

一方、それは403背中を受信し、それがコンソールに私は、このエラーを与える：

XMLHttpRequest cannot load http://angulairapi.rohanchhabra.in/auth. Invalid HTTP status code 403 

私は、郵便配達人のRESTクライアント経由で/ authにOPTIONSリクエストを送信しようとしましたが、期待通りに200 OKを返します。 Chromeはなぜこのように動作していますか？私は何が欠けていますか？

Answer 1

アクセスコントロールサーバの責任である、あなたはコンフィグトン必要Laravelの彼。

このパッケージを使用してください：Laravel Corsこれは非常に役立ちます。

Answer 2

"Access-Control-Request-Headers：accept"の問題。 "アクセプトコントロールヘッダー"に "accept"を追加する必要があります。

1. クローム：403禁止 カール 'http://angulairapi.rohanchhabra.in/auth' -X OPTIONS -H 'アクセス制御リクエスト・メソッド：POST'

   はこの2つのリクエスト比較/angulair.rohanchhabra.in'を-H 'Accept-Encoding：gzip、deflate、sdch' -H 'Accept-Language：ru-RU、ru; q = 0.8、en-US; q = 0.6、en; q = 0.4' -H 'User-Agent：Mozilla /5.0（Macintosh; Intel Mac OS X 10_10_1）AppleWebKit/537.36（GeckoのようなKHTML）Chrome/39.0.2171.95 Safari/537.36 '-H'受け入れ：/ '-H' Referer：http://angulair.rohanchhabra.in/ '-H'接続：キープアライブ '-H'アクセス制御要求ヘッダー：accept、content-type '-v

2. のFirefox：200 OK カール 'http://angulairapi.rohanchhabra.in/auth' -X OPTIONS -H 'アクセス制御リクエスト・メソッド：POST' -H '原産地：http://angulair.rohanchhabra.in' -H 'にAccept-エンコード：gzipで、収縮させる、SDCH' -H 'Accept-Language：ru-RU、ru; q = 0.8、en-US; q = 0.6、en; q = 0.4' -H 'User-Agent：Mozilla/5.0（Macintosh; Intel Mac OS X 10_10_1）AppleWebKit/537.36（GeckoのようなKHTML）Chrome/39.0.2171.95 Safari/537。36' -h 'を受け入れる：/' -H 'リファラー：http://angulair.rohanchhabra.in/' -H '接続：キープアライブ' -H 'アクセス制御リクエスト・ヘッダー：コンテンツタイプは、'

Answer 3

を-v Laravelで

、設定しよう：'Access-Control-Allow-Methods' & 'Access-Control-Allow-Headers'filters.php (Laravel 4.2)

で

public function handle($request, Closure $next) 
{ 

    header("Access-Control-Allow-Origin: *"); 

    // ALLOW OPTIONS METHOD 
    $headers = [ 
     'Access-Control-Allow-Methods'=> '*', 
     'Access-Control-Allow-Headers'=> '*' 
    ]; 
    if($request->getMethod() == "OPTIONS") { 
     // The client-side application can set only headers allowed in Access-Control-Allow-Headers 
     return Response::make('OK', 200, $headers); 
    } 

    $response = $next($request); 
    foreach($headers as $key => $value) 
     $response->header($key, $value); 
    return $response; 
} 

Answer 4

'*'に

の下に追加

App::before(function($request) 
{ 
    // Enable CORS 
    // In production, replace * with http://yourdomain.com 
    header("Access-Control-Allow-Origin: *"); 
    //header('Access-Control-Allow-Credentials: true'); optional 

    if (Request::getMethod() == "OPTIONS") { 
     // The client-side application can set only headers allowed in Access-Control-Allow-Headers 
     $headers = [ 
      'Access-Control-Allow-Methods'=> '*', 
      'Access-Control-Allow-Headers'=> '*' 
     ]; 
     return Response::make('You are connected to the API', 200, $headers); 
    } 
}); 

あなたはそれらのヘッダ（ワイルドカードは時々間違って動作します）送信する必要が最初にあなたの必要性

Answer 5

に合ったAccess-Control-*の値を変更することができます：ヘッダーを削除秒（かつ重要）で

Access-Control-Allow-Headers: X-Requested-With, content-type 
Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS 

をconfigにAngularJsサービス$ httpProviderから：