AngularJS PromiseがWEB APIレスポンスからヘッダーを取得できないのはなぜですか？

Question

AngularJS Promise内のWeb APIレスポンスからヘッダーを取得することが可能な場合、誰かに説明することはできますか？

私は次の呼び出しを作っています：

return $http({ 
     url: "http://localhost:19260/api/Authentication/Login/{credentials}", 
     method: "POST", 
     data: JSON.stringify(input), 
     dataType: "json" 
    }).then(function (response) { 
     if (response.status === 200) { 
      var jwt= response.headers('A‌​uthorization'); //Always null!!!! 
      auth = true; 
     } 
     else { 
      auth = false; 
     } 
    }, function (response) { 
     auth = false; 
    }); 

私は「response.headers（...）」を介して、私のヘッダーを読み取るしようとするたびに値はnullです。どうしてこれなの？フィドラーのレスポンスを見ると、ヘッダーとその値が表示されます。なぜAngularJSはそれを見ることができないのですか？

このCORSの問題ですか？クライアント/サーバーは、どちらもlocalhost上で実行されていますが、ポートは異なります。もしそうなら、私のCORS実装で何が問題になっていますか？

まず： デフォルト以外のヘッダの値は、クライアント側に表示されないので（つまり認証あなたのWeb APIサービスとウェブサーバ構成で考慮しない場合があります（C＃の）

[EnableCors(origins: "*", headers: "*", methods: "*")] 
public class AuthenticationController : ApiController 
{ 
    [Route("api/Authentication/Login/{credentials}")] 
    [HttpPost] 
    public HttpResponseMessage Login([FromBody]CredentialContainer credentials) 
    { 
      var response = new HttpResponseMessage(); 
      var jwt = GetJwtToken(credentials);    
      response.Headers.Add("Authorization", jwt); 
      response.StatusCode = HttpStatusCode.OK; 
      return response; 
    } 

Answer 1

2点およびその他のカスタムヘッダー）をWebサーバー（IIS Web.config）で設定することによって公開するまで、あなたはここのようにWeb.configにそれらを公開することができます

<system.webServer> 
    <httpProtocol> 
    <customHeaders> 
     <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Authorization" /> 
     <add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS,PUT,DELETE" /> 
     <add name="Access-Control-Allow-Origin" value="*" /> 
    </customHeaders> 
    </httpProtocol> 
</system.webServer> 

あなたはガナは、すべてのAPIのため、これらの構成を設定している場合は、これが最良の方法ですと、各メソッドの先頭にenable-cors属性を追加する必要はありません。また、web.configでこれらの設定を行う方がはるかに簡単で、もっとうまくいく（私の経験として）。

第2： あなたは、ajaxリクエストでヘッダーの認証値を正しく取得していません。 代わりにこのコードを試してみてください。

return $http({ 
     url: "http://localhost:19260/api/Authentication/Login/{credentials}", 
     method: "POST", 
     data: JSON.stringify(input), 
     dataType: "json" 
    }).success(function (response, status, headers, config) { 
     if (response.status === 200) { 
      //Try this one 
      var jwt= headers('A‌​uthorization'); 
      auth = true; 
     } 
     else { 
      auth = false; 
     } 
    }).error(function (response, status, headers, config) { 
     auth = false; 
    }); 

希望これはあなたにブロを助けることができます。がんばろう。