2016-08-23 8 views
3

私はAngularJSを使ってWebサイトを作成しています。これはサーバー上のAPIと通信し、Infoを提供します。 ログインするには、電子メール、パスワードなどを含むhttp投稿リクエストを送信する必要があります。Google ChromeとIEで正常に動作します。私はそれがポストリクエストを送信し、トークンを取得することを意味します。しかし、私がネットワークでチェックしたときにFireFoxでは、OPTIONリクエストを送信して200を取得しますが、その後はポストを送信しません!したがって、私のログインは消えず、私はトークンを手に入れません。AngularJSの投稿要求がFirefoxで正しく機能しない

この場合、どうすればよいですか?

App.configファイル:リクエストを送信するサービスで

$httpProvider.defaults.withCredentials = true; 
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8;'; 
    $httpProvider.interceptors.push('httpRequestInterceptor'); 

機能:

this.loginEmail = function(f_email, f_pass, deviceModel, deviceOs) { 
    var data = $.param({ 
      email: f_email, 
      password: f_pass, 
      device_model: deviceModel, 
      device_os: deviceOs 
     }); 

     return $http({ 
      method: "POST", 
      url: app.baseUrl + 'login_email/' + app.storeID + '/' + app.device_id, 
      data: data 
     }).success(function(response){ 
      return response.status; 
     }); 
    /*return $http.post(app.baseUrl + 'login_email/' + app.storeID + '/' + app.device_id, data).success(function(response){ 
     return response.status; 
    }).error(function(response){ 
     return response.status; 
    });*/ 
}; 

サーバーの資格に該当する 私が要求

を得る行うことができますので、

CORSは罰金ですenter image description here

EDIT:

:私はそれがトークンヘッダ を送信しますが、ポストのために、それは

httpRequestInterceptorないGETリクエストのためにログイン取得するときにChromeで : はここでは、この問題に関連している可能性があり、別のことです

app.factory('httpRequestInterceptor', function ($cookieStore) { 
    return { 
     request: function (config) { 

     config.headers['Authorization'] = $cookieStore.get('Auth-Key');; 
     config.headers['Accept'] = 'application/json;odata=verbose'; 
     return config; 
    } 
    }; 
}); 
+0

リクエストを妨害するブラウザの拡張子になる可能性があります。また、 'httpRequestInterceptor'とは何ですか? – Phil

+0

@Philは編集時にhttpRequestInterceptorを追加しました – W1ldworm

答えて

1

この問題は、Apacheの設定によって発生しています。後

Access-Control-Allow-Headers: "authorization" 

::前

Access-Control-Allow-Headers: "authorization, Content-type" 

はUPDATE:CORS要求に

APIがAuhtorizationトークンのようないくつかの特別なヘッダを必要とする場合は、すべてのオプションを返す必要があります(200を要求OK!)そうでなければ、上記の解決策はとにかく動作しません。

if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') { 
    header("HTTP/1.1 200 OK"); 
    exit(); 
} 

UPDATE 2: このOPTIONSの問題が発生したDjangoのためのRESTフレームワークで は、ここでは、コードです! OPTIONSでは、問題がある場合にAPI全体をパースしてリクエストを評価しますが、要求を送信するための権限が必要な場合でもエラーが発生します。

例:

プロファイルの詳細をresponsingためのAuthorizationヘッダーを必要とするAPI /プロファイルのようなURLがあると仮定する。それを取得するためにクロスドメイン要求を送信したいとします。あなたは正しいヘッダーを設定してクリック!権限のないエラーが表示されます。どうして?プレ・フライト・リクエスト(OPTIONS)には特別なヘッダーは含まれておらず、ブラウザからサーバーに送信されるため、RESTフレームワークを持つサーバーは要求全体を確認してOPTIONS要求を評価しますが、OPTIONSには承認ヘッダーがありませんこの要求は許可されていません!

開発の解決策: この問題は、クライアントサイドまたはバックエンドのどちらでも解決できます。フロントエンドの開発者がChromeで、次のプラグインをインストールすることができます。

は、コントロールが許起源を許可する:*

バックエンドの開発者は、Djangoのフレームワーク上でCORSを可能パッケージをインストールすることができます。

関連する問題