Angular 4 new HttpClient content-disposition header

Question

I am trying to get a file (array buffer) from my backend using the new HttpClient.

My code is pretty much like the following:

this.http.post(url, body, {responseType: 'blob', observe: 'response'})
  .subscribe(resp => {
    console.log(resp.headers.get('content-disposition'));
  });

The repsonse in my browser console is null

When I take a look at the network tab, then I see that content-disposition has a value like attachment; filename="whatever"

If I try to get content-type instead, then I receive something.

Have you experienced something similar or can you tell me what I have to do else? Many thanks

there is a relation to stackoverflow.com/questions/46389488/… but I could not solve it yet — Tobias Etter
– Tobias Etter, Commented Nov 7, 2017 at 15:00

kroeder · Accepted Answer · 2017-11-08 07:47:38Z

60

I had the same Issue and found this https://stackoverflow.com/a/45482346/1909698

It worked for me after adding 'Access-Control-Expose-Headers': 'Content-Disposition' in my backend response header.

answered Nov 8, 2017 at 7:47

kroeder

1,0562 gold badges11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tobias Etter Over a year ago

That was exactly what I searched for. Solved my problem. Thank you =)

human17 Over a year ago

Thanks! This was also useful: stackoverflow.com/questions/38897764/…

MG Developer Over a year ago

Thanks great find, the issue is so misleading because in browser you see the content-disposition but angular does not see it until you tell the server specifically to expose the specific header.

Youp Bernoulli Over a year ago

I didn't need 'Access-Control-Expose-Headers': 'Content-Disposition' in Angular 12 (anymore?!)

Alessio · Accepted Answer · 2020-10-22 07:27:42Z

0

if your backend is using SpringSecurity you need add ExposeHeader to configuration source:

@Bean
protected CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.addExposedHeader("Content-Disposition");
    return source;
}

edited Oct 22, 2020 at 7:27

Alessio

3,69620 gold badges42 silver badges52 bronze badges

answered Oct 22, 2020 at 6:24

Xy718

11 bronze badge

Collectives™ on Stack Overflow

Angular 4 new HttpClient content-disposition header

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related