HttpHeader isn't correctly sent

Question

I am coding according to this guide: https://angular.io/guide/http#configuring-other-parts-of-the-request.

My code is the following:

loadMenuOptions(): void {
    console.log('this.currentApiKey |' + this.currentApiKey);
     let header = new HttpHeaders();
    header = header.set('api-key', this.currentApiKey);

    this.commonService. getMenuOptions(MENU_OPTIONS, header).subscribe(respuesta => this.setMenuOptions(respuesta));
  }

The following code is when I send this object to the server:

getMenuOptions(endPoint: string, header: HttpHeaders): Observable<OptionsResponse> {
    console.log('header:' + JSON.stringify(header));
    return this.http.get<OptionsResponse>(endPoint,  header)
      .pipe(
        tap(res => this.log('getMenuOptions | status | ' + res.header.status)),
        catchError(this.handleError('getMenuOptions', null)));
  }

JSON.stringify shows this value:
header:{"normalizedNames":[],"lazyUpdate":[{"name":"api-key","value":"JEFE_HHHABBBJJJXXX","op":"s"}],"headers":[],"lazyInit":{"normalizedNames":[],"lazyUpdate":null,"headers":[]}}

but the server is not receiving the 'api-key' value.

I executed POSTMAN with the same value and the server correctly received the 'api-key' value.

What am I doing wrong?

UPDATE

This snapshot represents the first time that is invoked the 'getMenuOptions' method: first call to the server

This screenshot belongs to the second call to the server:

As you are seeing at the 2nd part of the 2nd call, the header which contains the 'api-key' value is sent inside a 'lazyUpdate' object.

`HttpHeaders` are immutable objects so you must refer to this [**answer**](https://stackoverflow.com/questions/47724737/angular-4-setting-headers-with-httpclient-module/47724949#47724949) — Aravind, Dec 19 '17 at 10:04
@Aravind, if you see my code you will see that I create a new header object. — Abelardo León González, Dec 19 '17 at 10:23
Could you add the request/response headers logged in the network devtools of a browser? — Jota.Toledo, Dec 19 '17 at 11:23
Please add your source code into your question, not pictures of it — Jota.Toledo, Dec 19 '17 at 11:41
My issue was solved. The problem was a misconfiguration in the server: https://developer.mozilla.org/es/docs/Web/HTTP/Headers/Access-Control-Allow-Origin Thanks for all for your comments and time trying to solve my issue. :) — Abelardo León González, Dec 19 '17 at 14:46

score 1 · Answer 1 · edited Feb 15 '22 at 06:45

1

The problem is in the implementation of your getMenuOptions method. Your are not respecting the definition of the post method from the HttpClient.

It should be like this:

http
  .post('/api/items/add', body, {
    headers: new HttpHeaders().set('Authorization', 'my-auth-token'),
  }).

Where:

1st argument: endpoint
2nd: request body
3rd: an object with the request config

Currently you are passing the headers object as 2nd argument and giving no configuration object (3rd argument), so its natural that your request isn't behaving as expected.

edited Feb 15 '22 at 06:45

marc_s

732,580
175
1,330
1,459

answered Dec 19 '17 at 11:45

Jota.Toledo

27,293
11
59
73

Perhaps is not a 'post' method (since I don't send any body to the server) but a 'get' method. I will try this. Thanks, @Jota.Toledo – Abelardo León González Dec 19 '17 at 12:58

HttpHeader isn't correctly sent

1 Answers1

Linked