Unable to view 'Content-Disposition' headers in Angular4 GET response

Question

I am trying to download a pdf file in my Angular app. The server (JBoss) serves a file with

Content-type : application/pdf and Content- Disposition

header set to attachment. I can see these headers quite well in fiddler response. However in my subscribe callback I can't see the same headers. Instead the header contains two property namely: _headers and _normalizedHeaders

While making the GET call. I do:

`this._http.get(url, {responseType: 'arraybuffer'}).subscribe((file: Response)=>{

    //Cant find headers in file here

});`

Also I tried setting responseType to RequestContentType.Blob and it made no difference either.

For my download implementation I have a piece of code that has always worked for me to download the attachment with AngularJS. I am only struggling here to read Content-Disposition header.

I also tried setting { observe : response }, expecting to get a detailed response that way. However, for some reasons setting that property is not allowed in GET options.

I have seen many answer on SO and tried most of them, but still not able to get the header.

P.S : Hitting the API directly on the browser gets me the file downloaded which means my Java code is fine and that makes me wonder what is wrong with my code above.

Requesting suggestions.

Answer 1

With the help of Access-Control-Expose-Headers and setExposedHeaders suggested by Evans, I could achieve the file download as below.

In your Java code, you need to expose the Access-Control-Expose-Headers, which can be done using CORS as :

    CorsFilter corsFilter = new CorsFilter();
    corsFilter.setAllowedHeaders("Content-Type, Access-Control-Allow-Headers, Access-Control-Expose-Headers, Content-Disposition, 
    Authorization, X-Requested-With");
    corsFilter.setExposedHeaders("Content-Disposition");

This will expose the required headers in the server response.

On your client, you can handle the response using the exact below code:

    private processDownloadFile() {
              const fileUrl = this._downloadUrl;
              this.http.get(fileUrl, ResponseContentType.ArrayBuffer).subscribe( (data: any) => {
                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();
                    }
                }
              });
    }   

Ofcourse, I wrote everything at one place. You might want to modularize various callbacks.

Hope it helps someone someday.