外部サービスにリクエストを送信するために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コンソールに一般的なメッセージが表示されることです。一方、Chrome で失敗したリクエストを調べると、応答ステータスが 422 であることがわかり、「プレビュー」タブには失敗の原因を説明する実際のメッセージが表示されます。
Chrome 開発ツールで表示される実際の応答メッセージにアクセスするにはどうすればよいですか?
問題を示すスクリーンショットを以下に示します。
ベストアンサー1
問題はCORSChrome コンソールに別のエラーがあることに気付きました:
要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。Origin 'http://ローカルホスト:4200' はアクセスが許可されません。応答の HTTP ステータス コードは 422 です。`
Access-Control-Allow-Originこれは、バックエンドのnginxがレスポンスにこれらのヘッダーを追加するように設定されているにもかかわらず、バックエンドサーバーからのレスポンスにヘッダーが欠落していることを意味します。add_header指令。
ただし、このディレクティブは、応答コードが 20X または 30X の場合にのみヘッダーを追加します。エラー応答ではヘッダーが欠落していました。always応答コードに関係なくヘッダーが追加されるようにするには、パラメータを使用する必要がありました。
add_header 'Access-Control-Allow-Origin' 'http://localhost:4200' always;
バックエンドが正しく構成されると、Angular コードで実際のエラー メッセージにアクセスできるようになります。