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);
  }

Bhupal · Accepted Answer · 2018-05-29 02:06:40Z

6

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.
});

answered May 29, 2018 at 2:06

Bhupal

1511 silver badge13 bronze badges

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

Comments

Bibin Gangadharan · Accepted Answer · 2021-04-25 12:16:36Z

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

answered Apr 25, 2021 at 12:16

Bibin Gangadharan

1,63116 silver badges15 bronze badges

Comments

Tyler2P · Accepted Answer · 2023-02-02 20:01:53Z

Firstly you need to allow your server to expose these headers. Note that it will show in you browser network tab, regardless if you have these settings. This makes it 'available'.

With C# it would look something like this:

services.AddCors(options => {
  options.AddPolicy(AllowSpecificOrigins,
  builder => {
    builder
      .WithOrigins("http://localhost:4200")
      .AllowAnyHeader()
      .AllowAnyMethod()
      .WithExposedHeaders("Content-Disposition", "downloadFileName");
  });
});

When you send your API request to the server ensure that you include the "observe" in you return. See below:

getFile(path: string): Observable<any> {
  // Create headers
  let headers = new HttpHeaders();
  // Create and return request
  return this.http.get<Blob>(
    `${environment.api_url}${path}`,
    { headers, observe: 'response', responseType: 'blob' as 'json' }
  ).pipe();
}

Then in your response of your angular on your subscribe you can access your filename like this (the subscribe method is not complete it attaches to a pipe function)

.....
.subscribe((response: HttpResponse<Blob>) => {
  const fileName = response.headers.get('content-disposition')
    .split(';')[1]
    .split('filename')[1]
    .split('=')[1]
    .trim();
});

Sahil Ralkar · Accepted Answer · 2020-08-22 08:01:27Z

0

this solution help me to get the Content-Disposition from response header.

(data)=>{  //the 'data' is response of file data with responseType: ResponseContentType.Blob.
    let contentDisposition = data.headers.get('content-disposition');
}

answered Aug 22, 2020 at 8:01

Sahil Ralkar

2,41225 silver badges26 bronze badges

Collectives™ on Stack Overflow

Angular5 Response Header (Content-Disposition) Reading

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related