Otrzymuję „Odpowiedź błędu HTTP dla (nieznany adres URL): 0 Nieznany błąd” zamiast rzeczywistego komunikatu o błędzie w Angular

Używam Angular 4 HttpClientdo wysyłania żądań do usługi zewnętrznej. To bardzo standardowa konfiguracja:

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

Problem polega na tym, że gdy żądanie nie powiedzie się, Http failure response for (unknown url): 0 Unknown Errorw konsoli pojawia się ogólny komunikat. W międzyczasie, gdy sprawdzam nieudane żądanie w chrome, widzę, że status odpowiedzi to 422, aw zakładce "podgląd" widzę aktualny komunikat opisujący przyczynę niepowodzenia.

Jak uzyskać dostęp do rzeczywistego komunikatu odpowiedzi, który widzę w narzędziach programistycznych Chrome?

Oto zrzut ekranu przedstawiający problem:

Problem był związany z CORS . Zauważyłem, że pojawił się inny błąd w konsoli Chrome:

Żądany zasób nie zawiera nagłówka „Access-Control-Allow-Origin”. Dlatego źródło „ http: // localhost: 4200 ” nie ma dostępu. Odpowiedź miała kod statusu HTTP 422. "

Oznacza to, że w odpowiedzi z serwera zaplecza brakowało Access-Control-Allow-Originnagłówka, mimo że nginx zaplecza został skonfigurowany do dodawania tych nagłówków do odpowiedzi z add_headerdyrektywą .

Jednak ta dyrektywa dodaje nagłówki tylko wtedy, gdy kod odpowiedzi to 20X lub 30X. W odpowiedziach na błędy brakowało nagłówków. Musiałem użyć alwaysparametru, aby upewnić się, że nagłówek jest dodawany niezależnie od kodu odpowiedzi:

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

Po prawidłowym skonfigurowaniu zaplecza mogłem uzyskać dostęp do rzeczywistego komunikatu o błędzie w kodzie Angular.

Na wypadek, gdyby ktoś inny zgubił się tak samo jak ja ... Moje problemy NIE były spowodowane przez CORS (mam pełną kontrolę nad serwerami i CORS został poprawnie skonfigurowany!).

Mój problem polegał na tym, że używam platformy Android na poziomie 28, która domyślnie wyłącza komunikację sieciową w postaci zwykłego tekstu i próbowałem opracować aplikację, która wskazuje adres IP mojego laptopa (na którym działa serwer API). Podstawowy adres URL interfejsu API to http: // [LAPTOP_IP]: 8081 . Ponieważ nie jest to protokół HTTPS , Android Webview całkowicie blokuje xfer sieciowy między telefonem / emulatorem a serwerem na moim laptopie. Aby to naprawić:

Dodaj konfigurację zabezpieczeń sieci

Nowy plik w projekcie: 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>

UWAGA: Należy tego używać ostrożnie, ponieważ zezwoli na cały zwykły tekst z Twojej aplikacji (nic nie jest zmuszone do używania https). Jeśli chcesz, możesz to jeszcze bardziej ograniczyć.

Odwołaj się do konfiguracji w głównym 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>

Otóż ​​to! Stamtąd przebudowałem APK i aplikacja była teraz w stanie komunikować się zarówno z emulatora, jak i telefonu.

Więcej informacji na temat sieci sec: https://developer.android.com/training/articles/security-config.html#CleartextTrafficPermitted

działa u mnie po wyłączeniu rozszerzenia blokującego reklamy w chrome, ten błąd czasami pojawia się ponieważ coś blokuje http w przeglądarce

Jeśli korzystasz z aplikacji .NET Core, to rozwiązanie może pomóc!

Co więcej, może to nie być błąd Angulara lub inny błąd żądania w Twojej aplikacji front-end

Najpierw musisz dodać pakiet Microsoft CORS Nuget:

Install-Package Microsoft.AspNetCore.Cors

Następnie musisz dodać usługi CORS do pliku startup.cs. W metodzie ConfigureServices powinieneś mieć coś podobnego do następującego:

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

Następnie dodaj oprogramowanie pośredniczące CORS do swojej aplikacji. W swoim startup.cs powinieneś mieć metodę Configure. Musisz mieć podobny do tego:

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

Opcje lambda to płynny interfejs API, dzięki czemu możesz dodawać / usuwać dodatkowe opcje, których potrzebujesz. W rzeczywistości możesz użyć opcji „AllowAnyOrigin”, aby zaakceptować dowolną domenę, ale zdecydowanie odradzam to robić, ponieważ otwiera to połączenia między źródłami od kogokolwiek. Możesz również ograniczyć wywołania między źródłami do ich metody HTTP (GET / PUT / POST itp.), Dzięki czemu możesz ujawniać tylko wywołania GET między domenami itp.

Ten błąd występował u mnie w przeglądarce Firefox, ale nie w Chrome podczas lokalnego programowania, i okazało się, że jest on spowodowany tym, że Firefox nie ufa certyfikatowi ssl mojego lokalnego interfejsu API (który jest nieprawidłowy, ale dodałem go do mojego lokalnego magazynu certyfikatów, co pozwoliło chrome mu wierzy, ale nie ff). Bezpośrednie przejście do interfejsu API i dodanie wyjątku w przeglądarce Firefox rozwiązało problem.

U mnie było to spowodowane przez wyjątek JsonSerializerException po stronie serwera.

Wystąpił nieobsługiwany wyjątek podczas wykonywania żądania Newtonsoft.Json.JsonSerializationException: wykryto pętlę odwołującą się do siebie z typem ...

Klient powiedział:

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

Uproszczenie typu odpowiedzi poprzez wyeliminowanie pętli rozwiązało problem.

Jeśli używasz Laravel jako zaplecza, edytuj plik .htaccess, po prostu wklejając ten kod, aby rozwiązać problem CROS w projekcie Angular lub IONIC

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

Podobny błąd może wystąpić, gdy nie podałeś ważnego certyfikatu klienta i tokena, które Twój serwer rozumie:

Błąd:

Odpowiedź o błędzie HTTP dla (nieznany adres URL): 0 Nieznany błąd

Przykładowy kod:

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)) );
  }

}

Zauważ, że oba MyClientCert& MyTokensą pustymi ciągami, stąd błąd.
MyClientCert& MyTokenmoże być dowolną nazwą zrozumiałą dla Twojego serwera.

Używam rozszerzeń ASP.NET SPA, które tworzą proxy na portach 5000 i 5001, które przechodzą do portu 4200 Angulara podczas programowania.

Miałem poprawnie skonfigurowany CORS dla portu https 5001 i wszystko było w porządku, ale nieumyślnie przeszedłem do starej zakładki, która była dla portu 5000. Wtedy nagle pojawił się ten komunikat. Jak powiedzieli inni w konsoli, pojawił się komunikat o błędzie „preflight”.

Dlatego niezależnie od środowiska, jeśli używasz CORS, upewnij się, że określono wszystkie porty - ponieważ host i port mają znaczenie.

Otrzymywałem tę dokładną wiadomość, gdy moje prośby zajmowały więcej niż 2 minuty. Przeglądarka rozłączała się z żądaniem, ale żądanie w zapleczu trwało aż do zakończenia. Serwer (ASP.NET Web API w moim przypadku) nie wykrył rozłączenia.

Po całodniowych poszukiwaniach w końcu znalazłem tę odpowiedź , wyjaśniając, że jeśli używasz konfiguracji proxy , ma domyślny limit czasu wynoszący 120 sekund (lub 2 minuty).

Możesz więc edytować konfigurację serwera proxy i ustawić ją na dowolną potrzebną:

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "timeout": 6000000
  }
}

Teraz używałem agentkeepalive, aby działało z uwierzytelnianiem NTLM i nie wiedziałem, że limit czasu agenta nie ma nic wspólnego z limitem czasu serwera proxy, więc oba muszą być ustawione. Trochę mi to zajęło, więc oto przykład:

const Agent = require('agentkeepalive');

module.exports = {
    '/api/': {
        target: 'http://localhost:3000',
        secure: false,
        timeout: 6000000,          // <-- this is needed as well
        agent: new Agent({
            maxSockets: 100,
            keepAlive: true,
            maxFreeSockets: 10,
            keepAliveMsecs: 100000,
            timeout: 6000000,      // <-- this is for the agentkeepalive
            freeSocketTimeout: 90000
        }),
        onProxyRes: proxyRes => {
            let key = 'www-authenticate';
            proxyRes.headers[key] = proxyRes.headers[key] &&
                proxyRes.headers[key].split(',');
        }
    }
};

Dla mnie był to problem z przeglądarką, ponieważ moje żądania działały dobrze w programie Postman.

Okazuje się, że z jakiegoś powodu Firefox i Chrome zablokowały żądania przechodzące do portu 6000, kiedy zmieniłem port API ASP.NET na 4000, błąd zmienił się na znany błąd CORS, który mogłem naprawić.

Chrome przynajmniej pokazał mi, ERR_UNSAFE_PORTco dało mi wskazówkę, co może być nie tak.

Jeśli masz odpowiedni nagłówek cors na miejscu. Twoja sieć firmowa może usuwać nagłówek cors. Jeśli witryna jest dostępna z zewnątrz, spróbuj uzyskać do niej dostęp spoza sieci, aby sprawdzić, czy to sieć powoduje problem - dobry pomysł niezależnie od przyczyny.

W asp.net core, jeśli kontroler API nie ma wywoływanej adnotacji [AllowAnonymous], dodaj ją powyżej nazwy kontrolera, na przykład

[ApiController]
    [Route("api/")]
    [AllowAnonymous]
    public class TestController : ControllerBase

Nie jest tak stara jak inne pytania, ale po prostu zmagałem się z tym w aplikacji Ionic-Laravel i nic stąd nie działa (i inne posty), więc zainstalowałem https://github.com/barryvdh/laravel-cors uzupełnienie w Laravel i zaczął i działa całkiem dobrze.

Mój był spowodowany nieprawidłową relacją w modelach, które próbowałem sprawdzić. Zrozumiano, debugując odpowiedź, która spowodowała awarię w relacji.

Dla mnie to nie był problem kątowy. Czy w bazie danych było pole typu DateTime, które ma wartość (0000-00-00), a mój model nie może powiązać tej właściwości poprawnie, więc zmieniłem na prawidłową wartość, taką jak (2019-08-12).

Używam .net core, OData v4 i MySql (złącze EF pomelo)

Dodaj te kody do pliku połączenia

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT,GET,POST,DELETE");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

Jeśli jest to usługa węzłowa, wykonaj czynności opisane tutaj

Zasadniczo jest to błąd udostępniania zasobów między źródłami (CORS). Więcej informacji o takich błędach tutaj .

Po zaktualizowaniu usługi węzła następującymi wierszami zadziałało:

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();
  });

Mój błąd polegał na tym, że plik był zbyt duży (rdzeń dotnet wydaje się mieć limit @ ~ 25 MB). Oprawa

• maxAllowedContentLength do 4294967295 (maksymalna wartość uint) w web.config
• dekorowanie akcji kontrolera za pomocą [DisableRequestSizeLimit]
• services.Configure (options => {options.MultipartBodyLengthLimit = 4294967295;}); w Startup.cs

rozwiązał problem za mnie.