CODEWITHSUNDEEP
angularbrowserdownloadhttp-headerscors
Saurabh Tiwari
Saurabh Tiwari

Reputation: 5151

Cannot see any response headers in http response of Angular 8

I was trying to download a csv file that is sent as byte-array from the server when I realized that my http response contain no headers at all. I was expecting a 'content-disposition' header in my response.

Previously, I have been working only with JSON response and hence never bothered to look for headers.

I have gone through many of the answers on SO which resolve similar issue. However, unlike most of the OPs, I am passing 'content-disposition' header from the server and has also exposed the same.

This is how the header map looks on browser which clearly shows the header set and exposed properly

enter image description here

Even with this response from server, all I get in my subscribe block is the json data in case of json request and Blob object in case of blob request. NO headers are seen at all.

I have also ensured that no response interceptors are placed in my code which might extract the headers away.

Below is a bit of code I am using:

downloadFile(entity: string) {
      return this.http.get(ApiUrlConstants.API_URL.PRICING_CSV_DOWNLOAD_URL + entity,
          { responseType: 'blob' }); // tried with arraybuffer too
}

and the below method is called from subscribe after data is received. This is where I am expecting headers

 public processBlobResponse(data: any): void {
const blob = new Blob([data._body], { type: data.headers.get('Content-Type') });
const contentDispositionHeader = data.headers.get('Content-Disposition');
if (contentDispositionHeader !== null) {
  const contentDispositionHeaderResult = contentDispositionHeader.split(';')[1].trim().split('=')[1];
  const contentDispositionFileName = contentDispositionHeaderResult.replace(/"/g, '');

  const downloadlink = document.createElement('a');
  downloadlink.href = window.URL.createObjectURL(blob);
  downloadlink.download = contentDispositionFileName;
  if (window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveBlob(blob, contentDispositionFileName);
  } else {
    downloadlink.click();
  }
}

}

I am pretty sure I am missing something. Any ideas ?

Upvotes: 1

Views: 1798

Answers (1)

David
David

Reputation: 34445

TL;DR;

Add {observe: 'response'} to your http options

Explanation

From the documentation

Important options include the observe and responseType properties.

  • The observe option specifies how much of the response to return.
  • The responseType option specifies the format in which to return data.

By default, angular will use {observe: 'body', responseType: 'json'} for http options, meaning that angular will only let you access the response's body, automatically turned into a json object, but not the headers.

If you need to access headers returned by the server, you need to specify observe: 'response' in the http options (documentation)

Note: When CORS is involved, a requirement to access non standard headers is to specify the Access-Control-Expose-Headers (see documentation) server side, e.g.

Access-Control-Expose-Headers: Content-Disposition, Authorization, MyCustomHeader

Upvotes: 2

Related Questions