[解決済み】Angularで実際のエラーメッセージの代わりに「Http failure response for (unknown url): 0 Unknown Error」が表示されるのですが。

質問

Angular 4を使用しています。 HttpClient を使用して、外部サービスにリクエストを送信しています。これは非常に標準的なセットアップです。

this.httpClient.get(url).subscribe(response => {
  //do something with response
}, err => {
  console.log(err.message);
}, () => {
  console.log('completed');
}

問題は、リクエストが失敗したときに、一般的な Http failure response for (unknown url): 0 Unknown Error というメッセージがコンソールに表示されます。一方、クロームで失敗したリクエストを検査すると、応答ステータスが422であり、"preview" タブで、失敗原因を説明する実際のメッセージが表示されます。

クロームの開発ツールで見ることができる実際の応答メッセージにアクセスするにはどうすればよいですか？

以下は、この問題を示すスクリーンショットです。

解決方法は？

この問題は CORS . Chromeのコンソールで別のエラーがあることに気づきました。

要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません。Origin ' http://localhost:4200 ' はアクセスを許可されていません。レスポンスにはHTTPステータスコード422.`が含まれています。

これは、バックエンドサーバーからの応答がなかったことを意味します。 Access-Control-Allow-Origin ヘッダを追加するようにバックエンドの nginx が設定されているにも関わらず add_header ディレクティブ .

しかし、このディレクティブは、レスポンスコードが20Xまたは30Xのときにのみヘッダを追加します。エラーレスポンスではヘッダがありません。そこで、私は always パラメータを使用して、レスポンスコードに関係なくヘッダーが追加されるようにしました。

add_header 'Access-Control-Allow-Origin' 'http://localhost:4200' always;

バックエンドが正しく設定されると、Angularのコードで実際のエラーメッセージにアクセスできるようになりました。