Angular 4.3.3 Httpclient : How Get Value From The Header Of A Response?

( Editor: VS Code; Typescript: 2.2.1 ) The purpose is to get the headers of the response of the request Assume a POST request with HttpClient in a Service import { Injectable

Solution 1:

You can observe the full response instead of the content only. To do so, you have to pass observe: response into the options parameter of the function call.

http
  .get<MyJsonData>('/data.json', {observe: 'response'})
  .subscribe(resp => {
    // Here, resp is of type HttpResponse<MyJsonData>.// You can inspect its headers:console.log(resp.headers.get('X-Custom-Header'));
    // And access the body directly, which is typed as MyJsonData as requested.console.log(resp.body.someField);
  });

See HttpClient's documentation

Solution 2:

main problem of typecast so we can use "response" as 'body'

we can handle like

const options = {
    headers: headers,
    observe: "response"as'body', // to display the full response & as 'body' for type castresponseType: "json"
};

returnthis.http.post(sessionUrl, body, options)
    .subscribe(response => {
        console.log(response);
        return response;
    }, err => {
        throw err;
    });

Solution 3:

Indeed, the main problem was a Typescript problem.

In the code of post(), options was declared directly in the parameters, so, as an "anonymous" interface.

The solution was to put directly the options in raw inside the parameters

http.post("url", body, {headers: headers, observe: "response"}).subscribe...

Solution 4:

If you use the solution from the top answer and you don't have access to .keys() or .get() on response.headers, make sure that you're using fetch rather than xhr.

Fetch requests are the default, but Angular will use xhr if xhr-only headers are present (e.x. x-www-form-urlencoded).

If you are trying to access any custom response headers, then you have to specify those headers with another header called Access-Control-Expose-Headers.

Solution 5:

The below method worked perfectly for me (currently Angular 10). It also avoids setting some arbitary filename, instead it gets the filename from the content-disposition header.

this._httpClient.get("api/FileDownload/GetFile", { responseType: 'blob'as'json', observe: 'response' }).subscribe(response =>  { 
    /* Get filename from Content-Disposition header */var filename = "";
    var disposition = response.headers.get('Content-Disposition');
    if (disposition && disposition.indexOf('attachment') !== -1) {
        var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
        var matches = filenameRegex.exec(disposition);
        if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
    }
    // This does the trickvar a = document.createElement('a');
    a.href = window.URL.createObjectURL(response.body);
    a.download = filename;
    a.dispatchEvent(newMouseEvent('click'));
})