Cant see headers of http post [Angular4]

Question

This is something that should be easy to fix but right know my mind can't find a solution.

I've got a post like this:

getAccordo(filtro: Filter): Observable<Response>  {
    return this.http.post<Response>(`${this.ENDPOINT}/export`,
        filtro,
        {observe: 'response', responseType: 'blob' as 'json'}   
    )
        .catch(error => this.handleError(error));
}

And this is where I use it:

  public getAccordo(event: any): any {debugger;
    event.preventDefault();
    this.accordiService.getAccordo(this.filter).subscribe(
      res => {debugger;
        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        const anchor = document.createElement('a');
        anchor.href = window.URL.createObjectURL(blob);
        anchor.download = Utils.extractHeaders(res);
        anchor.click();
      },
      error => {
        console.log(error);
      }
    );
  }

When I look the chrome console I can see that in the headers there is a content-disposition: attachment; filename="esportazione_accordi_20180905.xlsx"

But in my 'res' this is missing.

What id like to do is to get the filename and use it in anchor.download.

Thank you for the help if you need something more just ask.

EDIT

This is the headers that i get from the Response Headers, I dont see even 1 of them:

On the server side ive added: .header("Access-Control-Expose-Headers", "content-disposition") But still it doesnt work

EDIT 2:

Ok we are getting closer, I need to get the "filename" value at the end of the pic and assign that to anchor.download.

Answer 1

In order to expose this header to your Angular XHR, the server will need to set the Access-Control-Expose-Headers response header to allow specifically access to the Content-Disposition header. The docs have more information on the subject:

By default, only the 6 simple response headers are exposed:

• Cache-Control
• Content-Language
• Content-Type
• Expires
• Last-Modified
• Pragma

If you want clients to be able to access other headers, you have to list them using the Access-Control-Expose-Headers header.

This means that your server needs to set the following header:

Access-Control-Expose-Headers: Content-Disposition

In Angular, using HttpClient, the response headers are lazily parsed - To get a specific header's value, you'll need to to get the header using something like this:

res.headers.get('Content-Disposition');