Angular 6 Get response headers with httpclient 問題

Question

我正在使用下面的代碼嘗試從響應標頭中提取一個值 (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 中執行此操作的正確方法，但無濟於事？ 有人能指出我正確的方向嗎？

非常感謝，

標記。

Answer 1

您需要觀察整個響應，如下所述：

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

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

現在在 resp 里面你可以訪問 headers 一個例子

 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類中，您應該添加這兩個方法：

@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);
}

請注意，我禁用了 csrf，因為我使用的是 JWT。 請注意，您應該細化 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");

你可以用你的ReturnStatus替換這個Custom-Filter-Header