Angular5 Response Header (Content-Disposition) Reading

Question

How Can I read Response Header (Content-Disposition)? Please share resolution.

When I check at either Postman or Google Chrome Network tab, I can see 'Content-Disposition' at the response headers section for the HTTP call, but NOT able to read the header parameter at Angular Code.

// Node - Server JS
app.get('/download', function (req, res) {
  var file = __dirname + '/db.json';
  res.set({
    'Content-Type': 'text/plain',
    'Content-Disposition': 'attachment; filename=' + req.body.filename
  })
  res.download(file); // Set disposition and send it.
});


// Angular5 Code
 saveFile() {
    const headers = new Headers();
    headers.append('Accept', 'text/plain');
    this.http.get('http://localhost:8090/download', { headers: headers })
      .subscribe(
        (response => this.saveToFileSystem(response))
      );
  }

  private saveToFileSystem(response) {
    const contentDispositionHeader: string = response.headers.get('Content-Disposition'); // <== Getting error here, Not able to read Response Headers
    const parts: string[] = contentDispositionHeader.split(';');
    const filename = parts[1].split('=')[1];
    const blob = new Blob([response._body], { type: 'text/plain' });
    saveAs(blob, filename);
  }

Answer 1

I have found the solution to this issue. As per Access-Control-Expose-Headers, only default headers would be exposed.

In order to expose 'Content-Disposition', we need to set 'Access-Control-Expose-Headers' header property to either '*' (allow all) or 'Content-Disposition'.

// Node - Server JS
app.get('/download', function (req, res) {
var file = __dirname + '/db.json';
res.set({
  'Content-Type': 'text/plain',
  'Content-Disposition': 'attachment; filename=' + req.body.filename,
  'Access-Control-Expose-Headers': 'Content-Disposition' // <== ** Solution **
})
res.download(file); // Set disposition and send it.
});

Answer 2

It is not the problem with Angular, is the problem with CORS.

If the server does not explicitly allow your code to read the headers, the browser don't allow to read them. In the server you must add Access-Control-Expose-Headers in the response.

In the response it will be like Access-Control-Expose-Headers:<header_name>,

In asp.net core it can be added while setting up CORS in ConfigureServices method in startup.cs