it-swarm.com.de

Ich bekomme "HTTP-Fehlerantwort für (unbekannte URL): unbekannter Fehler" anstelle der tatsächlichen Fehlermeldung in Angular

Ich verwende Angular 4 HttpClient, um Anforderungen an einen externen Dienst zu senden. Es ist ein sehr Standard-Setup:

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

Das Problem ist, wenn die Anfrage fehlschlägt, sehe ich eine generische Http failure response for (unknown url): 0 Unknown Error-Nachricht in der Konsole. Wenn ich die fehlgeschlagene Anforderung in Chrome untersuche, kann ich sehen, dass der Antwortstatus 422 ist, und auf der Registerkarte "Vorschau" sehe ich die eigentliche Ursache der Fehlermeldung. 

Wie kann ich auf die eigentliche Antwortnachricht zugreifen, die ich in Chrome-Entwicklertools sehen kann?

Hier ist ein Screenshot, der das Problem veranschaulicht:  enter image description here

60
grdl

Das Problem war mit CORS verbunden. Ich habe festgestellt, dass ein weiterer Fehler in der Chrome-Konsole aufgetreten ist: 

Auf der angeforderten Ressource ist kein Header "Access-Control-Allow-Origin" vorhanden. Origin ' http: // localhost: 4200 ' ist daher kein Zugriff gestattet. Die Antwort hatte den HTTP-Statuscode 422.`

Dies bedeutet, dass der Antwort des Backend-Servers der Access-Control-Allow-Origin-Header fehlte, obwohl das Backend-Nginx so konfiguriert war, dass diese Header den Antworten mit add_header-Direktive hinzugefügt wurden.

Diese Direktive fügt jedoch nur Header hinzu, wenn der Antwortcode 20X oder 30X ist. Bei Fehlerantworten fehlten die Header. Ich musste den Parameter always verwenden, um sicherzustellen, dass der Header unabhängig vom Antwortcode hinzugefügt wird:

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

Nachdem das Backend korrekt konfiguriert wurde, konnte ich auf die tatsächliche Fehlermeldung in Angular-Code zugreifen.

55
grdl

für mich nach dem Ausschalten der Anzeigenblockerweiterung in Chrome funktioniert dieser Fehler manchmal, weil etwas http im Browser blockiert

 enter image description here

6

Dieser Fehler trat bei Firefox bei mir auf, nicht jedoch bei der lokalen Entwicklung in Chrome. Es stellte sich heraus, dass Firefox meiner/meiner lokalen API SSL-Zertifikat nicht vertraute lagern, die es Chrom vertrauen lassen, aber nicht ff). Durch die direkte Navigation zur API und das Hinzufügen einer Ausnahme in Firefox wurde das Problem behoben.

3
frax

Für mich wurde es durch eine serverseitige JsonSerializerException verursacht.

Bei der Ausführung der Anforderung ist eine unbehandelte Ausnahme aufgetreten Newtonsoft.Json.JsonSerializationException: Selbstreferenzierungsschleife mit Typ erkannt ...

Der Kunde sagte:

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

Die Vereinfachung des Antworttyps durch Eliminieren der Schleifen löste das Problem.

3
Perrier

Ein ähnlicher Fehler kann auftreten, wenn Sie kein gültiges Clientzertifikat und kein Token angegeben haben, das Ihr Server versteht:

Error:

HTTP-Fehlerantwort für (unbekannte URL): 0 unbekannter Fehler

Beispielcode:

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

class MyCls1 {

  constructor(private http: HttpClient) {
  }

  public myFunc(): void {

    let http: HttpClient;

    http.get(
      'https://www.example.com/mypage',
      {
        headers:
          new HttpHeaders(
            {
              'Content-Type': 'application/json',
              'X-Requested-With': 'XMLHttpRequest',
              'MyClientCert': '',        // This is empty
              'MyToken': ''              // This is empty
            }
          )
      }
    ).pipe( map(res => res), catchError(err => throwError(err)) );
  }

}

Beachten Sie, dass sowohl MyClientCert als auch MyToken leere Zeichenfolgen sind, daher der Fehler.
MyClientCert & MyToken kann ein beliebiger Name sein, den Ihr Server versteht.

Wenn Sie die .net-Kernanwendung verwenden, ist der folgende Schritt möglicherweise hilfreich für Sie!

Darüber hinaus ist dies kein Angular oder anderer Request-Fehler in Ihrer FrontEnd-Anwendung

Zuerst müssen Sie das Microsoft CORS-Paket von Nuget hinzufügen. Wenn Ihre Jungs nicht zu Ihrer Anwendung hinzugefügt wurden, folgen Sie dem Installationsbefehl.

Install-Package Microsoft.AspNetCore.Cors

Anschließend müssen Sie die CORS-Services hinzufügen. In Ihrer startup.cs in Ihrer ConfigureServices-Methode sollten Sie etwas Ähnliches wie das Folgende haben:

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

Als nächstes müssen Sie die CORS-Middleware zu Ihrer App hinzufügen. In Ihrer startup.cs sollten Sie eine Configure-Methode haben. Sie müssen es ungefähr so ​​haben:

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

Die Optionen Lambda sind eine fließende API, mit der Sie alle benötigten Extras hinzufügen/entfernen können. Sie können tatsächlich die Option "AllowAnyOrigin" verwenden, um jede Domain zu akzeptieren, aber ich empfehle Ihnen dringend, dies nicht zu tun, da es Cross-Origin-Aufrufe von jedermann ermöglicht. Sie können Cross-Origin-Aufrufe auch auf ihre HTTP-Methode (GET/PUT/POST usw.) beschränken, sodass Sie GET-Aufrufe nur domänenübergreifend usw. verfügbar machen können.

Vielen Dank, Sie sathish (sat)

2
sathish

Wenn Sie Laravel als Backend verwenden, bearbeiten Sie Ihre .htaccess-Datei, indem Sie diesen Code einfügen, um das Problem CROS in Ihrem Angular- oder IONIC-Projekt zu lösen

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
1
shirjeel khan

Ich verwende ASP.NET SPA Extensions, die einen Proxy für die Ports 5000 und 5001 erstellt, die während der Entwicklung zum Port 4200 von Angular geleitet werden.

Ich hatte CORS für HTTPS-Port 5001 richtig eingerichtet und alles war in Ordnung, aber ich ging versehentlich zu einem alten Lesezeichen, das für Port 5000 war. Wie andere in der Konsole gesagt haben, gab es eine "Preflight" -Fehlermeldung.

Unabhängig von Ihrer Umgebung sollten Sie also, wenn Sie CORS verwenden, sicherstellen, dass Sie alle Ports angegeben haben - Host und Port sind beide wichtig. 

1
Simon_Weaver

Ist nicht so alt wie andere Fragen, aber ich habe mich gerade damit in einer Ionic-Laravel-App herumgekämpft, und von hier (und anderen Posts) aus funktioniert nichts. Deshalb habe ich https://github.com/barryvdh/laravel-cors installiert Komplement in Laravel und gestartet und es funktioniert ziemlich gut.

0

Für den Fall, dass jemand anderes so verloren geht wie ich ... Meine Probleme waren NICHT CORS-bedingt (Ich habe die volle Kontrolle über die Server und CORS wurde korrekt konfiguriert!).

Mein Problem bestand darin, dass ich die Android-Plattform 28 verwende, die standardmäßig die Klartext-Netzwerkkommunikation deaktiviert und ich versuchte, eine App zu entwickeln, die auf die IP meines Laptops verweist (auf der der API-Server ausgeführt wird). Die API-Basis-URL lautet ungefähr http: // [LAPTOP_IP]: 8081 . Da es sich nicht um https handelt, blockiert Android Webview den Netzwerk-Xfer zwischen dem Telefon/Emulator und dem Server auf meinem Laptop vollständig. Um dies zu beheben:

Fügen Sie eine Netzwerksicherheitskonfiguration hinzu

Neue Datei im Projekt: 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>

HINWEIS: Dies sollte mit Vorsicht verwendet werden, da es allen Klartext aus Ihrer App zulässt (nichts, was zur Verwendung von https gezwungen ist). Sie können es weiter einschränken, wenn Sie möchten.

Verweisen Sie auf die Konfiguration in der Datei "main 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>

Das ist es! Von dort aus habe ich die APK neu erstellt und die App konnte nun sowohl vom Emulator als auch vom Telefon aus kommunizieren.

Weitere Informationen zum Netzwerk sec: https://developer.Android.com/training/articles/security-config.html#CleartextTrafficPermitted

0
haggy

Meine Ursache war eine ungültige Beziehung in den Modellen, die ich abfragen wollte. Durch das Debuggen der Antwort herausgefunden, stürzte es bei der Beziehung ab.

0
J.Kirk.

Mein Fehler war, dass die Datei zu groß war (Dotnet Core scheint ein Limit von @ ~ 25 MB zu haben). Rahmen

  • maxAllowedContentLength bis 4294967295 (maximaler Wert von uint) in web.config
  • dekorieren der Controller-Aktion mit [DisableRequestSizeLimit]
  • services.Configure (options => {options.MultipartBodyLengthLimit = 4294967295;}); in Startup.cs

löste das Problem für mich.

0
Spikolynn

Wenn Sie einen richtigen Header haben. Ihr Unternehmensnetzwerk entfernt möglicherweise den Header von cors. Wenn auf die Website von außen zugegriffen werden kann, versuchen Sie, von außerhalb Ihres Netzwerks darauf zuzugreifen, um festzustellen, ob das Netzwerk das Problem verursacht.

0
N-ate

Nun, ich habe den gleichen Fehler erlebt, nachdem ich alle Kommentare hier gelesen habe, hat nichts geholfen. Schließlich stellte sich heraus, dass mein Knotenserver nicht lief.

0
Imran Hussain