且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Angular 6 Get response headers with httpclient 问题

更新时间:2023-02-16 20:34:58

您需要按照以下说明观察整个响应:

You need to observe the entire response as described below:

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

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

现在在 resp 里面你可以访问 headers一个例子

Now inside resp you can access headers An example

 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 公开一小组标头.可能如果您打开开发者工具并检查您的响应标头,您应该会看到所需的标头.

If you can't access your custom header as explained above it's because a small set of headers are exposed to javascript by default for security reasons. Probably if you open developer tools and you inspect your response headers you should see the desired one.

谁可以选择向 JavaScript 公开哪些标头?

Web 应用程序选择公开的标头(因此您的 Web 服务或后端.显然,您的 Web 应用程序可以使用多种语言和/或使用多种框架编写.

Exposed headers are choosen by the web application (so your webservices, or your backend. Obviously you web application could be written using many languages and/or using many framework.

根据您使用的内容,您可以通过不同的方式实现这一目标.

Depending on what you are using you can achieve this goal by different ways.

为了让您了解应该做什么,我可以发布我的 Spring 解决方案.在扩展 WebSecurityConfigurerAdapter 的类中,您应该添加以下两个方法:

To give you an idea of what you should do I can post my Spring solution. In class extending WebSecurityConfigurerAdapter you should add this two methods:

@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 规则.

Note that I've disabled csrf because I'm using JWT. Note that you should refine CorsFilter rules.

如您所见,我已将 Custom-Filter-Header 添加到此行

As you can see I have added Custom-Filter-Header into this line

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