49

( 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
} from "@angular/core";

import {
    HttpClient,
    HttpHeaders,
} from "@angular/common/http";

@Injectable()
export class MyHttpClientService {
    const url = 'url';

    const body = {
        body: 'the body'
    };

    const headers = 'headers made with HttpHeaders';

    const options = {
        headers: headers,
        observe: "response", // to display the full response
        responseType: "json"
    };

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

HttpClient Angular Documentation

The first problem is that I have a Typescript error :

'Argument of type '{ 
    headers: HttpHeaders; 
    observe: string; 
    responseType: string;
}' is not assignable to parameter of type'{ 
    headers?: HttpHeaders;
    observe?: "body";
    params?: HttpParams; reportProgress?: boolean;
    respons...'.

Types of property 'observe' are incompatible.
Type 'string' is not assignable to type '"body"'.'
at: '51,49' source: 'ts'

Indeed, when I go to the ref of post() method, I point on this prototype (I Use VS code)

post(url: string, body: any | null, options: {
        headers?: HttpHeaders;
        observe?: 'body';
        params?: HttpParams;
        reportProgress?: boolean;
        responseType: 'arraybuffer';
        withCredentials?: boolean;
    }): Observable<ArrayBuffer>;

But I want this overloaded method :

post(url: string, body: any | null, options: {
    headers?: HttpHeaders;
    observe: 'response';
    params?: HttpParams;
    reportProgress?: boolean;
    responseType?: 'json';
    withCredentials?: boolean;
}): Observable<HttpResponse<Object>>;

So, I tried to fix this error with this structure :

  const options = {
            headers: headers,
            "observe?": "response",
            "responseType?": "json",
        };

And It compiles! But I just get the body request as in json format.

Futhermore, why I have to put a ? symbol at the end of some name of fields ? As I saw on Typescript site, this symbol should just tell to the user that it is optional ?

I also tried to use all the fields, without and with ? marks

EDIT

I tried the solutions proposed by Angular 4 get headers from API response. For the map solution:

this.http.post(url).map(resp => console.log(resp));

Typescript compiler tells that map does not exists because it is not a part of Observable

I also tried this

import { Response } from "@angular/http";

this.http.post(url).post((resp: Response) => resp)

It compiles, but I get a unsupported Media Type response. These solutions should work for "Http" but it does not on "HttpClient".

EDIT 2

I get also a unsupported media type with the @Supamiu solution, so it would be an error on my headers. So the second solution from above (with Response type) should works too. But personnaly, I don't think it is a good way to mix "Http" with "HttpClient" so I will keep the solution of Supamiu

96

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

|improve this answer|||||
  • Thank you! I get a unsupported data type but it would be a mistake on my headers – M.Lobry Aug 4 '17 at 12:00
  • Does anyone have an idea how to do the same for http.patch() ? It doesn't work for me. The response is empty, when I want to have the raw response object with a status code. – chriszichrisz Jan 10 '18 at 11:55
  • Okay I just found out: it's http.patch(url, params, {observe: 'response'}) and make sure the response object is of type HttpResponse<object> – chriszichrisz Jan 10 '18 at 12:05
  • 9
    Thank you! I tried this but I'm not getting a value that appears in Response Headers in a network tab. – SPnL Apr 14 '18 at 5:56
  • .get() is not a function in Angular 7 – Kevin Beal Oct 26 '18 at 19:01
21

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 cast
    responseType: "json"
};

return this.http.post(sessionUrl, body, options)
    .subscribe(response => {
        console.log(response);
        return response;
    }, err => {
        throw err;
    });
|improve this answer|||||
  • That typecasting part saved me lots of time and tension. Thanks Singh (Y) – Ms.Tamil Mar 22 '19 at 15:18
14

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...
|improve this answer|||||
  • 2
    life saver - this was driving me nuts. Still don't get why inlining the options hash works but post("url", body, options) doesn't. But yay! – Gishu Dec 11 '17 at 12:33
  • 1
    @Gishu, the reason is explained in this answer. A solution without inlining that worked great for me is in this answer, although some changes may need to be made to the interface to make it match what you need. – Stack Underflow Jun 21 '18 at 22:24
  • this should work, but it doesn't work on my side, the "post method" is simply not being called, not sending or receiving anything in this setup, it works only if i put {observe: "response"} as the 3rd parameter – aero Oct 3 '18 at 15:32
2

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.

|improve this answer|||||
0

Some times even with the above solution you can't retrieve custom headers if it is CORS request. In that case you need to whitelist desired headers in server side.

For Example: Access-Control-Expose-Headers: X-Total-Count

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.