Recebo “Resposta de falha de HTTP para (URL desconhecido): 0 Erro desconhecido” em vez da mensagem de erro real no Angular

Estou usando o Angular 4 HttpClientpara enviar solicitações para serviços externos. É uma configuração muito padrão:

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

O problema é que, quando a solicitação falha, vejo uma Http failure response for (unknown url): 0 Unknown Errormensagem genérica no console. Enquanto isso, quando inspeciono a solicitação com falha no chrome, vejo que o status da resposta é 422 e, na guia "preview", vejo a mensagem real descrevendo a causa da falha.

Como acesso a mensagem de resposta real que posso ver nas ferramentas de desenvolvimento do chrome?

Aqui está uma captura de tela demonstrando o problema:

O problema estava relacionado ao CORS . Percebi que havia outro erro no console do Chrome:

Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado. A origem ' http: // localhost: 4200 ' não é, portanto, permitido o acesso. A resposta tinha o código de status HTTP 422.`

Isso significa que a resposta do servidor de back-end estava ausente do Access-Control-Allow-Origincabeçalho, embora o back-end nginx estivesse configurado para adicionar esses cabeçalhos às respostas com add_headerdiretiva .

No entanto, esta diretiva adiciona cabeçalhos apenas quando o código de resposta é 20X ou 30X. Nas respostas a erros, os cabeçalhos estavam ausentes. Eu precisava usar o alwaysparâmetro para garantir que o cabeçalho fosse adicionado, independentemente do código de resposta:

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

Depois que o back-end foi configurado corretamente, eu pude acessar a mensagem de erro real no código Angular.

Caso alguém acabe tão perdido quanto eu ... Meus problemas NÃO foram causados ​​pelo CORS (eu tenho controle total do (s) servidor (es) e o CORS foi configurado corretamente!).

Meu problema foi porque estou usando a plataforma Android nível 28, que desabilita as comunicações de rede de texto não criptografado por padrão, e estava tentando desenvolver o aplicativo que aponta para o IP do meu laptop (que está executando o servidor da API). O URL base da API é algo como http: // [LAPTOP_IP]: 8081 . Como não é https , o android webview bloqueia completamente o xfer da rede entre o telefone / emulador e o servidor no meu laptop. Para corrigir isso:

Adicionar uma configuração de segurança de rede

Novo arquivo no projeto: 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: Isso deve ser usado com cuidado, pois permitirá todo o texto não criptografado do seu aplicativo (nada forçado a usar https). Você pode restringir ainda mais, se desejar.

Consulte a configuração no arquivo config.xml principal

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

É isso aí! A partir daí, reconstruí o APK e o aplicativo agora conseguia se comunicar pelo emulador e pelo telefone.

Mais informações sobre o segundo da rede: https://developer.android.com/training/articles/security-config.html#CleartextTrafficPermitted

trabalhando para mim depois de desativar a extensão de bloco de anúncios no chrome, esse erro aparece em algum momento porque algo que bloqueia o http no navegador

Se você estiver usando o aplicativo .NET Core, esta solução pode ajudar!

Além disso, isso pode não ser um erro de solicitação angular ou outro no seu aplicativo front-end

Primeiro, você precisa adicionar o pacote Microsoft CORS Nuget:

Install-Package Microsoft.AspNetCore.Cors

Você precisará adicionar os serviços CORS no seu startup.cs. No seu método ConfigureServices, você deve ter algo semelhante ao seguinte:

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

Em seguida, adicione o middleware CORS ao seu aplicativo. No seu startup.cs, você deve ter um método Configure. Você precisa tê-lo semelhante a este:

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

As opções lambda são uma API fluente para que você possa adicionar / remover quaisquer opções extras necessárias. Você pode realmente usar a opção "AllowAnyOrigin" para aceitar qualquer domínio, mas eu recomendo que você não faça isso, pois abre chamadas de origem cruzada de qualquer pessoa. Você também pode limitar as chamadas de origem cruzada ao método HTTP (GET / PUT / POST etc), para que você possa expor apenas as chamadas GET entre domínios, etc.

Esse erro estava ocorrendo para mim no Firefox, mas não no Chrome, durante o desenvolvimento local, e acabou sendo causado pelo fato de o Firefox não confiar no certificado SSL da minha API local (que não é válido, mas eu o adicionei à minha loja local de certificados , que permite chrome confiar, mas não ff). Navegar para a API diretamente e adicionar uma exceção no Firefox corrigiu o problema.

Para mim, foi causado por um servidor JsonSerializerException.

Ocorreu uma exceção não tratada durante a execução da solicitação Newtonsoft.Json.JsonSerializationException: loop de auto-referência detectado com o tipo ...

O cliente disse:

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

Tornar o tipo de resposta mais simples, eliminando os loops, resolveu o problema.

Se você estiver usando o Laravel como seu back-end, edite seu arquivo .htaccess apenas colando este código, para resolver o problema de CROS no seu projeto Angular ou IONIC

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

Um erro semelhante pode ocorrer quando você não fornece um certificado de cliente válido e um token que seu servidor entende:

Erro:

Resposta de falha de HTTP para (URL desconhecido): 0 Erro desconhecido

Código de exemplo:

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

}

Note-se que ambos MyClientCert& MyTokensão strings vazias, daí o erro.
MyClientCert& MyTokenpode ser qualquer nome que seu servidor entenda.

Estou usando as extensões ASP.NET SPA, que me criam um proxy nas portas 5000 e 5001 que passam para a porta 4200 da Angular durante o desenvolvimento.

Eu tinha o CORS configurado corretamente para a porta https 5001 e tudo estava bem, mas inadvertidamente fui para um marcador antigo que era para a porta 5000. Então, de repente, essa mensagem surgiu. Como outros já disseram no console, houve uma mensagem de erro 'preflight'.

Portanto, independentemente do seu ambiente, se você estiver usando o CORS, verifique se todas as portas foram especificadas - pois o host e a porta são importantes.

Eu recebia a mensagem exata sempre que meus pedidos demoravam mais de 2 minutos para terminar. O navegador se desconectaria da solicitação, mas a solicitação no back-end continuou até que fosse concluída. O servidor (API Web da ASP.NET no meu caso) não detectou a desconexão.

Depois de um dia inteiro pesquisando, finalmente encontrei esta resposta , explicando que, se você usar a configuração do proxy , ela terá um tempo limite padrão de 120 segundos (ou 2 minutos).

Portanto, você pode editar sua configuração de proxy e configurá-la para o que precisar:

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

Agora, eu estava usando agentkeepalive para fazê-lo funcionar com a autenticação NTLM e não sabia que o tempo limite do agente não tinha nada a ver com o tempo limite do proxy, portanto, é necessário definir os dois. Levei um tempo para perceber isso, então aqui está um exemplo:

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

Para mim, era um problema de navegador, pois meus pedidos estavam funcionando bem no Postman.

Acontece que, por algum motivo, o Firefox e o Chrome bloquearam solicitações de entrada 6000, depois que mudei a porta da API do ASP.NET para 4000, o erro mudou para um erro conhecido do CORS que eu poderia corrigir.

O Chrome pelo menos me mostrou o ERR_UNSAFE_PORTque me deu uma pista sobre o que poderia estar errado.

Se você tiver um cabeçalho de cors adequado no lugar. Sua rede corporativa pode estar removendo o cabeçalho cors. Se o site estiver acessível externamente, tente acessá-lo de fora da sua rede para verificar se a rede está causando o problema - uma boa ideia, independentemente da causa.

No núcleo do asp.net, se o seu controlador de API não tiver uma anotação chamada [AllowAnonymous], adicione-a acima do nome do seu controlador, como

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

Não é tão antigo quanto as outras perguntas, mas apenas lutei com isso em um aplicativo Ionic-Laravel, e nada funciona a partir daqui (e outras postagens), então instalei https://github.com/barryvdh/laravel-cors o complemento em Laravel e começou e funciona muito bem.

O meu foi causado por um relacionamento inválido nos modelos que eu estava tentando consultar. Descoberto por depuração da resposta que caiu na relação.

Para mim, não era um problema angular. Era um campo do tipo DateTime no banco de dados que tem um valor de (0000-00-00) e meu modelo não pode vincular essa propriedade correta, então mudei para um valor válido como (2019-08-12).

Estou usando o .net core, OData v4 e MySql (conector EF pomelo)

Adicione este código ao seu arquivo de conexão

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 este for um serviço de nó, tente as etapas descritas aqui

Basicamente, é um erro de compartilhamento de recursos de origem cruzada (CORS). Mais informações sobre esses erros aqui .

Depois de atualizar meu serviço de nó com as seguintes linhas, ele funcionou:

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

Meu erro foi que o arquivo era muito grande (o núcleo do dotnet parece ter um limite de ~ 25Mb). Configuração

• maxAllowedContentLength para 4294967295 (valor máximo de uint) em web.config
• decorando a ação do controlador com [DisableRequestSizeLimit]
• services.Configure (options => {options.MultipartBodyLengthLimit = 4294967295;}); em Startup.cs

resolveu o problema para mim.