角2/4返答getカスタムヘッダー

Question

「X-Auth-Key」のキーを持つ応答ヘッダーを持つget要求を持つAngular2/4アプリケーションがあります。 response.headerを呼び出すと、デフォルトのヘッダーが取得され、response.headers.get（ 'X-Auth-Token'）が呼び出され、nullが返されます。以下は私のコードとChromeコンソールからのリクエストのスクリーンショットです（var urlは別の場所で定義されています）。

getToken(id: string, password: string): Observable<User> { 
    let headers = new Headers({ 'X-Auth-User': id, 'X-Auth-Key': password }); 
    return this.http 
     .get(url + 'auth', { headers: headers }) 
     .map(response => { 
      let user: User = response.json() as User; 

      // store user details and jwt token in local storage to keep user logged in between page refreshes 
      localStorage.setItem('currentUser', JSON.stringify({ user: user, token: response.headers.get('X-Auth-Token') })); 

      return user; 
     }) 
    }// Get authorization token 

おかげで私は私が間違っているのかわからないんだけど、私は任意の助けに感謝！

Answer 1

サーバーはX-Auth-Keyレスポンスヘッダの値にアクセスすることを許可するためにあなたの要求フロントエンドのJavaScriptコードが必要な場合は、その値に「X-Auth-Key」を含むAccess-Control-Expose-Headers response headerを送信するように設定する必要があります。

応答がAccess-Control-Expose-Headersヘッダーに値が含まれていない場合は、ブラウザがあなたのWebアプリでは、クライアント側のJavaScriptからアクセスできるようになる唯一の応答ヘッダがCache-Control、 Content-Language、 Content-Type、 Expires、 Last-Modified としています Pragma。

https://fetch.spec.whatwg.org/#cors-safelisted-response-header-nameを参照してください。