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中，您可以访问标头一个例子

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

请注意，由于我使用的是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

Angular 6获取带有httpclient问题的响应标头

1 个答案: