Ottengo "Http failure response for (unknown url): 0 Unknown Error" invece del messaggio di errore effettivo in Angular

Sto usando Angular 4 HttpClientper inviare richieste a un servizio esterno. È una configurazione molto standard:

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

Il problema è che quando la richiesta fallisce vedo un Http failure response for (unknown url): 0 Unknown Errormessaggio generico nella console. Nel frattempo, quando controllo la richiesta non riuscita in Chrome, vedo che lo stato della risposta è 422 e nella scheda "anteprima" vedo il messaggio effettivo che designa la causa dell'errore.

Come si accede al messaggio di risposta effettivo che posso vedere negli strumenti di sviluppo di Chrome?

Ecco uno screenshot che mostra il problema:

Il problema era correlato a CORS . Ho notato che c'era un altro errore nella console Chrome:

Nessuna intestazione "Access-Control-Allow-Origin" è presente sulla risorsa richiesta. L'accesso all'origine " http: // localhost: 4200 " non è pertanto consentito. La risposta aveva il codice di stato HTTP 422

Ciò significa che la risposta dal server backend mancava l' Access-Control-Allow-Originintestazione anche se il backend nginx era configurato per aggiungere quelle intestazioni alle risposte con la add_headerdirettiva .

Tuttavia, questa direttiva aggiunge intestazioni solo quando il codice di risposta è 20X o 30X. Nelle risposte di errore mancavano le intestazioni. Avevo bisogno di utilizzare il alwaysparametro per assicurarmi che l'intestazione fosse aggiunta indipendentemente dal codice di risposta:

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

Una volta che il backend è stato configurato correttamente, ho potuto accedere al messaggio di errore effettivo nel codice angolare.

Nel caso in cui qualcun altro finisse perduto come me ... I miei problemi NON erano dovuti a CORS (ho il pieno controllo dei server e CORS è stato configurato correttamente!).

Il mio problema era perché utilizzo la piattaforma Android di livello 28 che disabilita le comunicazioni di rete in chiaro per impostazione predefinita e stavo cercando di sviluppare l'app che punta all'IP del mio laptop (che esegue il server API). L'URL di base dell'API è simile a http: // [LAPTOP_IP]: 8081 . Poiché non è https , android webview blocca completamente la rete xfer tra il telefono / emulatore e il server sul mio laptop. Per risolvere questo problema:

Aggiungi una configurazione di sicurezza di rete

Nuovo file nel progetto: 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>

NOTA: questo dovrebbe essere usato con attenzione in quanto consentirà tutto il testo in chiaro dalla tua app (niente costretto a usare https). Puoi restringerlo ulteriormente se lo desideri.

Fare riferimento alla configurazione nel file config.xml principale

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

Questo è tutto! Da lì ho ricostruito l'APK e l'app era ora in grado di comunicare sia dall'emulatore che dal telefono.

Maggiori informazioni sulla rete sec: https://developer.android.com/training/articles/security-config.html#CleartextTrafficPermitted

funziona per me dopo aver disattivato l'estensione di blocco degli annunci in Chrome, questo errore a volte appare perché qualcosa che blocca http nel browser

Se stai usando l'applicazione .NET Core, questa soluzione potrebbe aiutarti!

Inoltre, questo potrebbe non essere un errore di richiesta angolare o di altro tipo nella tua applicazione front-end

Innanzitutto, devi aggiungere il pacchetto Microsoft CORS Nuget:

Install-Package Microsoft.AspNetCore.Cors

È quindi necessario aggiungere i servizi CORS nel file startup.cs. Nel tuo metodo ConfigureServices dovresti avere qualcosa di simile al seguente:

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

Successivamente, aggiungi il middleware CORS alla tua app. Nel tuo startup.cs dovresti avere un metodo Configure. Devi averlo simile a questo:

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

Le opzioni lambda sono un'API fluente in modo da poter aggiungere / rimuovere tutte le opzioni extra di cui hai bisogno. Puoi effettivamente utilizzare l'opzione "AllowAnyOrigin" per accettare qualsiasi dominio, ma ti consiglio vivamente di non farlo in quanto apre chiamate cross origin da chiunque. Puoi anche limitare le chiamate cross origin al loro metodo HTTP (GET / PUT / POST ecc.), In modo da poter esporre solo le chiamate GET cross-domain ecc.

Questo errore si è verificato per me in Firefox ma non in Chrome durante lo sviluppo locale, e si è scoperto che Firefox non si fidava del certificato SSL della mia API locale (che non è valido, ma l'avevo aggiunto al mio archivio di certificati locale, che lasciava chrome si fida di esso ma non ff). Navigare direttamente all'API e aggiungere un'eccezione in Firefox ha risolto il problema.

Per me è stato causato da un'eccezione JsonSerializerException lato server.

Si è verificata un'eccezione non gestita durante l'esecuzione della richiesta Newtonsoft.Json.JsonSerializationException: loop autoreferenziale rilevato con tipo ...

Il cliente ha detto:

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

Rendere il tipo di risposta più semplice eliminando i loop ha risolto il problema.

Se stai usando Laravel come backend, modifica il tuo file .htaccess semplicemente incollando questo codice, per risolvere il problema CROS nel tuo progetto Angular o IONIC

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

Un errore simile può verificarsi quando non hai fornito un certificato client e un token validi che il tuo server comprende:

Errore:

Risposta di errore HTTP per (URL sconosciuto): 0 Errore sconosciuto

Codice di esempio:

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

}

Nota che entrambi MyClientCert& MyTokensono stringhe vuote, da cui l'errore.
MyClientCert& MyTokenpuò essere qualsiasi nome compreso dal tuo server.

Sto usando ASP.NET SPA Extensions che mi crea un proxy sulle porte 5000 e 5001 che passano attraverso la porta 4200 di Angular durante lo sviluppo.

Avevo impostato correttamente CORS per la porta https 5001 e tutto andava bene, ma sono andato inavvertitamente a un vecchio segnalibro che era per la porta 5000. Poi improvvisamente è apparso questo messaggio. Come altri hanno detto nella console, c'era un messaggio di errore di "verifica preliminare".

Quindi, indipendentemente dal tuo ambiente, se stai usando CORS assicurati di aver specificato tutte le porte, poiché l'host e la porta sono entrambi importanti.

Ricevo esattamente quel messaggio ogni volta che le mie richieste impiegavano più di 2 minuti per finire. Il browser si disconnetteva dalla richiesta, ma la richiesta sul back-end continuava fino al termine. Il server (ASP.NET Web API nel mio caso) non rileva la disconnessione.

Dopo un'intera giornata di ricerche, ho finalmente trovato questa risposta , spiegando che se usi il proxy config , ha un timeout predefinito di 120 secondi (o 2 minuti).

Quindi, puoi modificare la configurazione del proxy e impostarlo su ciò di cui hai bisogno:

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

Ora, stavo usando agentkeepalive per farlo funzionare con l'autenticazione NTLM e non sapevo che il timeout dell'agente non ha nulla a che fare con il timeout del proxy, quindi devono essere impostati entrambi. Mi ci è voluto un po 'per rendermene conto, quindi ecco un esempio:

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

Per me è stato un problema con il browser, poiché le mie richieste funzionavano bene in Postman.

Si scopre che per qualche motivo, Firefox e Chrome hanno bloccato le richieste di 6000trasferimento, una volta modificata la porta dell'API ASP.NET in4000 , l'errore è stato modificato in un errore CORS noto che potevo correggere.

Chrome almeno mi ha mostrato ERR_UNSAFE_PORTche mi ha dato un indizio su cosa potrebbe essere sbagliato.

Se disponi di un'intestazione cors corretta. La rete aziendale potrebbe rimuovere l'intestazione cors. Se il sito web è accessibile dall'esterno, prova ad accedervi dall'esterno della rete per verificare se la rete sta causando il problema: una buona idea indipendentemente dalla causa.

In asp.net core, se il tuo controller API non ha l'annotazione chiamata [AllowAnonymous], aggiungila sopra il nome del controller come

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

Non è vecchio come altre domande, ma ho appena lottato con questo in un'app Ionic-Laravel e niente funziona da qui (e da altri post), quindi ho installato https://github.com/barryvdh/laravel-cors complement in Laravel e iniziato e funziona abbastanza bene.

Il mio è stato causato da una relazione non valida nei modelli che stavo cercando di interrogare. Capito eseguendo il debug della risposta si è verificato un arresto anomalo nella relazione.

Per me non è stato un problema angolare. Era un campo di tipo DateTime nel DB che ha un valore di (0000-00-00) e il mio modello non può legare correttamente quella proprietà, quindi sono passato a un valore valido come (2019-08-12).

Sto usando .net core, OData v4 e MySql (connettore EF pomelo)

Aggiungi questo codice nel file di connessione

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

Se questo è un servizio nodo, prova i passaggi descritti qui

Fondamentalmente, è un errore Cross-Origin Resource Sharing (CORS). Maggiori informazioni su tali errori qui .

Una volta aggiornato il mio servizio nodo con le seguenti righe, ha funzionato:

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

Il mio errore è stato che il file era troppo grande (il core dotnet sembra avere un limite a ~ 25 Mb). Ambientazione

• maxAllowedContentLength su 4294967295 (valore massimo di uint) in web.config
• decorare l'azione del controller con [DisableRequestSizeLimit]
• services.Configure (options => {options.MultipartBodyLengthLimit = 4294967295;}); in Startup.cs

ha risolto il problema per me.