angularjsを使用したCORSの問題$ http

Question

CORSリクエストでangularjs $ httpを使用すると、私の成功関数authenticateSuccess（data、status、headers）が間違ったヘッダーを取得するときに問題が発生します。私たちが知っているように、CORSのリクエストはすべて2回あり、サーバーから2回の応答を得ます。最初はコルス検証情報です.2回目は応答が必要ですが、成功関数は最初の応答でヘッダーを取得します。しかし、データは2番目の応答からです。

function login(credentials) { 

     var data = { 
      username: credentials.username, 
      password: credentials.password, 
      rememberMe: credentials.rememberMe 
     }; 
     console.log(data); 
     return $http.post('//localhost:8080/api/authenticate', data).success(authenticateSuccess); 

     function authenticateSuccess(data, status, headers) { 
      console.log(headers()); 
      console.log(data); 
      var bearerToken = headers('Authorization'); 
      if (angular.isDefined(bearerToken) && bearerToken.slice(0, 7) === 'Bearer ') { 
       var jwt = bearerToken.slice(7, bearerToken.length); 
       service.storeAuthenticationToken(jwt, credentials.rememberMe); 
       return jwt; 
      } 
     } 
    } 

Answer 1

あなたがバックエンドでのヘッダーと一致しない送信するヘッダとして、この問題を得ている

ので）（ご送信ヘッダ

contentHeaders =新しいヘッダをフロントエンドではと仮定しましょう。 contentHeaders.append（ 'Authorization'、 'あなたのトークン'）; contentHeaders.append（ 'Content-Type'、 'application/json'）; contentHeaders.append（ 'Access-Control-Allow-Origin'、 '*'）;

「許可」、「コンテンツタイプ」、「アクセス制御許可元」などのヘッダーは、バックエンドで使用できるヘッダーと一致する必要があります。

だから、バックエンドで「アクセス制御 - 許可 - ヘッダは、」上記のすべてのヘッダーが

res.header（「アクセス制御 - 許可 - 起源」、「*」）の下を参照していなければなりません。 res.header（「アクセス制御許可ヘッダー」、「許可、コンテンツタイプ、アクセス制御許可元」）。

ここで、Access-Control-Allow-Headersでは、フロントエンドから送信されたすべてのヘッダー（ 'Authorization'、 'C​​ontent-type'、 'Access-Control-Allow-Origin'）を渡す必要があります。

上記の概念を使用すると完全に動作します。

ありがとうございました