Http failure response 0 Unknown error 错误分析

使用下面这段代码在 Angular 应用里进行 HTTP 访问：

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

问题是，当请求失败时，我在控制台中看到 (unknown url): 0 Unknown Error 消息的通用 Http 失败响应。 同时，当我在 chrome 中检查失败的请求时，我可以看到响应状态为 422，并且在预览选项卡中，我看到了描述失败原因的实际消息。

如何访问我可以在 chrome 开发工具中看到的实际响应消息？

这是演示问题的屏幕截图：

[图片]

一种可能的原因是请求的资源上不存在“Access-Control-Allow-Origin”标头。 因此，不允许来自 Origin ‘http://localhost:4200’ 的应用访问该资源。

这意味着来自后端服务器的响应缺少 Access-Control-Allow-Origin 标头，即使后端 nginx 已配置为使用 add_header 指令将这些标头添加到响应中。

但是，此指令仅在响应代码为 20X 或 30X 时添加标头。 在错误响应中，标头丢失。 无论响应代码如何，我都需要使用 always 参数来确保添加标头：

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

正确配置后端后，我可以访问 Angular 代码中的实际错误消息。

除了 CORS 错误之外，另一种可能的错误：

我的问题是因为我使用的是 Android 平台级别 28，默认情况下禁用明文网络通信，并且我正在尝试开发指向笔记本电脑 IP（运行 API 服务器）的应用程序。 API 基本 URL 类似于 http://[LAPTOP_IP]:8081。 因为它不是 https，所以 android webview 完全阻止了手机/模拟器和我笔记本电脑上的服务器之间的网络传输。 为了解决这个问题，修改下列配置文件：

resources/android/xml/network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <!-- Set application-wide security config -->
  <base-config cleartextTrafficPermitted="true"/>
</network-security-config>

<platform name="android">
    ...
    <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
        <application android:networkSecurityConfig="@xml/network_security_config" />
    </edit-config>
    <resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
    ....
</platform>