Get Http response headers and content Angular 6

Question

I have the following web server method, that returns data to our front-end applicaiton.

[FunctionName("SearchCustomerBySearchTerm")]
public static async Task<HttpResponseMessage> SearchCustomerBySearchTerm([HttpTrigger(AuthorizationLevel.Function, WebRequestMethods.Http.Get, Route = "Customer/SearchCustomerBySearchTerm/{searchTerm}/pageSize/{pageSize}")]HttpRequestMessage req, TraceWriter log, string searchTerm, int pageSize)
{
    try
    {
        var continuationToken = req.Headers.TryGetValues("continuationToken", out IEnumerable<string> values) ? values.FirstOrDefault() : null;
        PagedResponse<CustomerSearchResult> pagedResponse = await _customerComponent.FindCustomerBy(searchTerm, continuationToken, pageSize);

        if (pagedResponse == null) return req.CreateResponse(HttpStatusCode.NoContent, $"Could not find any data related to {searchTerm}");

        HttpResponseMessage responseMessage = req.CreateResponse(HttpStatusCode.OK, pagedResponse.Results);
        responseMessage.Content.Headers.Add("continuationToken", pagedResponse.Continuation);
        responseMessage.Content.Headers.Add("Access-Control-Expose-Headers", "*");

        return responseMessage;
    }
    catch (Exception ex)
    {
        log.Error(ex.Message);
        return req.CreateResponse(HttpStatusCode.InternalServerError, "Something went wrong. Could not search for customers");
    }
}

I am allowing all headers to be exposed, by adding the Access-Control-Expose-Headers .

From my Angular application, I am doing the request as follow:

searchCustomersPaged(searchTerm: string, continuationToken: string): Observable<HttpResponse<CustomerSearchResult>> {
    let customHeaders = new HttpHeaders().set("continuationToken", this.currentContinuationToken);
    const url = "http://localhost:7071/api/Customer/SearchCustomerBySearchTerm/andrew/pageSize/10";
    const parsedUrl = encodeURI(url);
    return this.http.get<HttpResponse<CustomerSearchResult>>(parsedUrl, { headers: customHeaders });
  }

As you can see above, I am expecting an HttpResponse<CustomerSearch> back.

Here is how I try and read my headers:

nextClikcedHandle(continuationToken: string): void {
this.customerService.searchCustomersPaged(this.customerService.searchTerm, this.currentContinuationToken)
.subscribe(resp => {
  //add current continuation token, to previous now, as this will be used for 'previous' searching
  this.previousContinuationTokens.push(this.currentContinuationToken);

  //set next continuation token received by server
  this.currentContinuationToken = resp.headers.get('continuationToken');

  //return search results
  this.customerService.searchResults.next(resp.body);
});

}

With the above code, the resp.headers and the resp.body is always undefined . Why is this happening?

If I look at the Network tab within Chrome, I can see my data is returned, as well as my header.

What am I doing wrong?

Answer 1

I found a useful article here :

By default the HttpClient returns the body of the response. You can pass-in an object with an observe key set to a value of 'response' to get the full response. This can be useful to inspect for certain headers:

So I changed my code as follow, with the added observe key.

searchCustomersPaged(searchTerm: string, continuationToken: string): Observable<HttpResponse<CustomerSearchResult>> {
    let customHeaders = new HttpHeaders().set("continuationToken", this.currentContinuationToken);
    const url = "http://localhost:7071/api/Customer/SearchCustomerBySearchTerm/andrew/pageSize/10";
    const parsedUrl = encodeURI(url);
    return this.http.get<CustomerSearchResult>(parsedUrl, { headers: customHeaders, observe: 'response' });
  }

After changing above method, I could query body and headers as per normal:

nextClikcedHandle(continuationToken: string): void {
this.customerService.searchCustomersPaged(this.customerService.searchTerm, this.currentContinuationToken)
.subscribe(resp => {
  //add current continuation token, to previous now, as this will be used for 'previous' searching
  this.previousContinuationTokens.push(this.currentContinuationToken);

  //set next continuation token received by server
  this.currentContinuationToken = resp.headers.get('continuationToken');

  //return search results
  this.customerService.searchResults.next(resp.body);
});