我得到"(未知网址)的Http失败响应:0未知错误"而不是Angular中的实际错误消息

Question

我正在使用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 dev工具中看到的实际响应消息？

这是一个展示问题的屏幕截图:

Answer 1

问题与CORS有关.我注意到Chrome控制台中还有其他错误:

请求的资源上不存在"Access-Control-Allow-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代码中的实际错误消息.

Answer 2

在Chrome中关闭广告块扩展后为我工作,此错误有时会出现,因为在浏览器中阻止了http

Answer 3

万一其他人像我一样迷路了...我的问题不是由于CORS（我完全控制服务器，并且CORS配置正确！）。

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

添加网络安全配置

项目中的新文件：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>

注意：应谨慎使用，因为它将允许您应用中的所有明文（不得强制使用https）。您可以根据需要进一步限制它。

在主config.xml中引用配置

<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>

而已！从那里，我重新构建了APK，现在该应用程序可以通过模拟器和手机进行通讯了。

有关网络安全秒的更多信息：https : //developer.android.com/training/articles/security-config.html#CleartextTrafficPermitted

Answer 4

对我来说，它是由服务器端 JsonSerializerException 引起的。

执行请求 Newtonsoft.Json.JsonSerializationException 时发生未处理的异常：自引用循环检测到类型...

客户说：

POST http://localhost:61495/api/Action net::ERR_INCOMPLETE_CHUNKED_ENCODING
ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}

通过消除循环使响应类型更简单解决了问题。

Answer 5

If you are using .NET Core application, this solution might help!

Moreover this might not be an Angular or other request error in your front end application

First, you have to add the Microsoft CORS Nuget package:

Install-Package Microsoft.AspNetCore.Cors

You then need to add the CORS services in your startup.cs. In your ConfigureServices method you should have something similar to the following:

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors();
}

接下来，将CORS中间件添加到您的应用程序。在您的startup.cs中，您应该有一个Configure方法。您需要具有以下类似内容：

public void Configure(IApplicationBuilder app, IHostingEnvironment env, 
ILoggerFactory loggerFactory)
{
    app.UseCors( options => 
    options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
    app.UseMvc();
}

选项lambda是一种流畅的API，因此您可以添加/删除所需的任何其他选项。您实际上可以使用选项“ AllowAnyOrigin”来接受任何域，但是我强烈建议您不要这样做，因为它会打开任何人的跨源调用。您还可以将跨源调用限制为其HTTP方法（GET / PUT / POST等），因此您只能跨域公开GET调用等。

Answer 6

在本地开发时，我在 Firefox 中发生了此错误，但在 Chrome 中没有发生此错误，结果证明是由于 Firefox 不信任我本地 API 的ssl 证书（该证书无效，但我已将其添加到我的本地证书存储中，这让chrome 信任它，但不信任 ff）。直接导航到 API 并在 Firefox 中添加异常解决了该问题。

Answer 7

如果这是节点服务，请尝试此处概述的步骤

基本上，这是一个跨域资源共享 (CORS) 错误。有关此类错误的更多信息请参见此处。

当我使用以下几行更新我的节点服务后，它就起作用了：

let express = require("express");
let app = express();

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");    
    next();
  });