web-dev-qa-db-ja.com

Angular 6 httpclientの問題で応答ヘッダーを取得する

以下のコードを使用して、応答ヘッダーから値（ReturnStatus）を抽出しようとしています。

Keep-Alive: timeout=5, max=100
ReturnStatus: OK,SO304545
Server: Apache/2.4.29 (Win32) OpenSSL/1.0.2m

コード;

import { Injectable } from '@angular/core';

import { Account } from './model/account';
import { HttpClient } from '@angular/common/http';
import { Observable, throwError } from "rxjs";
import { map, filter, catchError, mergeMap } from 'rxjs/operators';

 createOrder(url) : Observable<any> {

  return this._http.get(url, {withCredentials: true, observe: 'response'})
  .pipe(
    map((resp: any) => {
      console.log("response", resp);
      return resp;

    }), catchError( error => {
      console.log("createOrder error",error );
      alert("Create Order Service returned an error. See server log for mote details");
    return throwError("createOrder: " + error)

    })
  );
}

しかし、私のconsole.logはただ与えるだけです。

HttpResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: 
"http://localhost/cgi-bin/dug.cgi/wh?Page… 
plateLocation=C:%5Ctemp%5Corderimporttemplate.txt", ok: true, …}

Angularでこれを行う正しい方法についてこのサイトや他のサイトを調べましたが、役に立ちませんか？誰かが私を正しい方向に向けることができますか？

どうもありがとう、

マーク。

angularhttpclient
9
Mark Beynon

以下で説明するように、応答全体を観察する必要があります。

 createOrder(url) : Observable<HttpResponse<Object>>{

    return this.http.get<HttpResponse<Object>>(this.url, {observe: 'response'}).pipe(
         tap(resp => console.log('response', resp))
    );
}

これで、resp内でヘッダーにアクセスできます。例

 createOrder(url) : Observable<HttpResponse<Object>>{

    return this.http.get<HttpResponse<Object>>(this.url, {observe: 'response'}).pipe(
         tap(resp => console.log('heaeder', resp.headers.get('ReturnStatus')))
    );
}

上記で説明したようにカスタムヘッダーにアクセスできない場合は、セキュリティ上の理由から、少数のヘッダーセットがデフォルトでJavaScriptに公開されているためです。おそらく開発者ツールを開いて応答ヘッダーを調べると、目的のヘッダーが表示されるはずです。

javascriptに公開するヘッダーを選択できるのは誰ですか？

公開されたヘッダーは、Webアプリケーションによって選択されます（Webサービスまたはバックエンド。Webアプリケーションは、多くの言語やフレームワークを使用して作成できます。

使用しているものに応じて、さまざまな方法でこの目標を達成できます。

あなたがすべきことのアイデアをあなたに与えるために、私のSpringソリューションを投稿することができます。 WebSecurityConfigurerAdapterを拡張するクラスでは、次の2つのメソッドを追加する必要があります。

@Override
protected void configure(HttpSecurity httpSecurity) throws Exception {
    httpSecurity
            // we don't need CSRF because our token is invulnerable
            .csrf().disable()
            .cors()
} 


@Bean
public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.addAllowedOrigin("*");
    config.addExposedHeader("Authorization, x-xsrf-token, Access-Control-Allow-Headers, Origin, Accept, X-Requested-With, " +
            "Content-Type, Access-Control-Request-Method, Custom-Filter-Header");
    config.addAllowedHeader("*");
    config.addAllowedMethod("OPTIONS");
    config.addAllowedMethod("GET");
    config.addAllowedMethod("POST");
    config.addAllowedMethod("PUT");
    config.addAllowedMethod("DELETE");
    source.registerCorsConfiguration("/**", config);
    return new CorsFilter(source);
}

JWTを使用しているため、csrfを無効にしていることに注意してください。 CorsFilterルールを調整する必要があることに注意してください。

ご覧のとおり、Custom-Filter-Headerをこの行に追加しました

config.addExposedHeader("Authorization, x-xsrf-token, Access-Control-Allow-Headers, Origin, Accept, X-Requested-With, " +
                "Content-Type, Access-Control-Request-Method, Custom-Filter-Header");

このCustom-Filter-HeaderをReturnStatusに置き換えることができます

17
firegloves