[解決済み】Angular HttpClientにHTTPヘッダを追加してもヘッダが送信されない、なぜ？

質問

以下は私のコードです。

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

logIn(username: string, password: string) {
    const url = 'http://server.com/index.php';
    const body = JSON.stringify({username: username,
                                 password: password});
    const headers = new HttpHeaders();
    headers.set('Content-Type', 'application/json; charset=utf-8');
    this.http.post(url, body, {headers: headers}).subscribe(
        (data) => {
            console.log(data);
        },
        (err: HttpErrorResponse) => {
            if (err.error instanceof Error) {
                console.log('Client-side error occured.');
            } else {
                console.log('Server-side error occured.');
            }
        }
    );
}

と、ここでネットワークのデバッグを行います。

Request Method:POST
Status Code:200 OK
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:46
Content-Type:text/plain

という文字列が'Request Payload'に格納されますが、私のサーバーではPOST値を受信しません。

print_r($_POST);
Array
(
)

POST時にヘッダーが設定されていないことがエラーの原因だと思うのですが、何か間違ったことをしたのでしょうか？

どうすればいいですか？

のインスタンスは、新しい HttpHeader クラスは 不変 オブジェクトになります。クラスのメソッドを呼び出すと、結果として新しいインスタンスが返されます。そのため、基本的には以下のようにする必要があります。

let headers = new HttpHeaders();
headers = headers.set('Content-Type', 'application/json; charset=utf-8');

または

const headers = new HttpHeaders({'Content-Type':'application/json; charset=utf-8'});

アップデート：複数のヘッダを追加する

let headers = new HttpHeaders();
headers = headers.set('h1', 'v1').set('h2','v2');

または

const headers = new HttpHeaders({'h1':'v1','h2':'v2'});

HttpClientのヘッダやパラメータにオブジェクトマップを使用できるようにした。

から 5.0.0-beta.6 の作成を省略することが可能になりました。 HttpHeaders オブジェクトを作成し、オブジェクトマップを直接引数として渡します。そこで、次のようなことが可能になりました。

http.get('someurl',{
   headers: {'header1':'value1','header2':'value2'}
});