Angular'daki gerçek hata mesajı yerine "Http hatası yanıtı (bilinmeyen url): 0 Bilinmeyen Hata" alıyorum

HttpClientHarici hizmete istek göndermek için Angular 4 kullanıyorum . Çok standart bir kurulum:

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

Sorun şu ki, istek başarısız olduğunda Http failure response for (unknown url): 0 Unknown Errorkonsolda genel bir mesaj görüyorum . Bu arada, başarısız isteği Chrome'da incelediğimde yanıt durumunun 422 olduğunu ve "önizleme" sekmesinde hatanın nedenini açıklayan gerçek mesajı görüyorum.

Chrome dev araçlarında görebildiğim gerçek yanıt mesajına nasıl erişebilirim?

Sorunu gösteren bir ekran görüntüsü:

Sorun CORS ile ilgiliydi . Chrome konsolunda başka bir hata olduğunu fark ettim:

İstenen kaynakta 'Access-Control-Allow-Origin' başlığı yok. Bu nedenle ' http: // localhost: 4200 ' kaynağına erişime izin verilmiyor. Yanıt, 422 numaralı HTTP durum kodunu içeriyordu.

Bu, arka Access-Control-Allow-Originuç nginx'in bu başlıkları add_headeryönerge ile yanıtlara eklemek üzere yapılandırılmasına rağmen arka uç sunucusundan gelen yanıtın başlık eksik olduğu anlamına gelir .

Ancak, bu yönerge yalnızca yanıt kodu 20X veya 30X olduğunda üstbilgi ekler. Hata yanıtlarında başlıklar eksikti. alwaysYanıt kodundan bağımsız olarak başlığın eklendiğinden emin olmak için parametreyi kullanmam gerekiyordu :

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

Arka uç doğru bir şekilde yapılandırıldıktan sonra, Angular kodundaki gerçek hata mesajına erişebildim.

Başkasının benim gibi kaybolması durumunda ... Sorunlarım CORS'dan kaynaklanmıyordu (sunucular üzerinde tam kontrole sahibim ve CORS doğru yapılandırılmış!).

Benim sorunum, varsayılan olarak açık metin ağ iletişimini devre dışı bırakan Android platformu düzey 28'i kullanmam ve dizüstü bilgisayarımın IP'sini işaret eden (API sunucusunu çalıştıran) uygulamayı geliştirmeye çalışmamdı . API temel URL'si, http: // [LAPTOP_IP]: 8081 gibi bir şeydir . Https olmadığı için , android webview, dizüstü bilgisayarımdaki telefon / emülatör ve sunucu arasındaki ağı tamamen engelliyor. Bunu düzeltmek için:

Bir ağ güvenlik yapılandırması ekleyin

Projedeki yeni dosya: kaynaklar / 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>

NOT: Bu, uygulamanızdaki tüm düz metinlere izin vereceğinden dikkatli kullanılmalıdır (hiçbir şey https kullanmaya zorlanmaz). Dilerseniz daha da kısıtlayabilirsiniz.

Config'e main config.xml'de başvurun

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

Bu kadar! Oradan APK'yi yeniden oluşturdum ve uygulama artık hem emülatörden hem de telefondan iletişim kurabiliyordu.

Ağ güvenliği hakkında daha fazla bilgi: https://developer.android.com/training/articles/security-config.html#CleartextTrafficPermitted

Chrome'da reklamları kapattıktan sonra benim için çalışıyor, bu hata bazen tarayıcıda http'yi engelleyen bir şey nedeniyle ortaya çıkıyor

.NET Core uygulamasını kullanıyorsanız, bu çözüm yardımcı olabilir!

Üstelik bu , ön uç uygulamanızda bir Angular veya başka bir istek hatası olmayabilir

Öncelikle, Microsoft CORS Nuget paketini eklemelisiniz:

Install-Package Microsoft.AspNetCore.Cors

Daha sonra startup.cs dosyanıza CORS hizmetlerini eklemeniz gerekir. ConfigureServices yönteminizde aşağıdakine benzer bir şeye sahip olmalısınız:

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

Ardından, CORS ara yazılımını uygulamanıza ekleyin. Startup.cs dosyanızda bir Configure metodunuz olmalıdır. Şuna benzer olması gerekir:

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

Lambda seçenekleri akıcı bir API'dir, böylece ihtiyacınız olan ekstra seçenekleri ekleyebilir / kaldırabilirsiniz. Aslında herhangi bir etki alanını kabul etmek için “AllowAnyOrigin” seçeneğini kullanabilirsiniz, ancak herhangi birinden çapraz kaynak aramaları açtığı için bunu yapmamanızı şiddetle tavsiye ederim. Ayrıca, çapraz kaynak çağrılarını HTTP Yöntemiyle (GET / PUT / POST vb.) Sınırlandırabilirsiniz, böylece yalnızca GET çağrılarını etki alanları arası vb.

Bu hata benim için Firefox'ta meydana geliyordu, ancak Chrome'da yerel olarak geliştirirken ortaya çıktı ve bunun nedeni Firefox'un yerel API'imin SSL sertifikasına güvenmemesinden kaynaklanıyordu (bu geçerli değil, ancak bunu yerel sertifika mağazama eklemiştim. chrome güveniyor ama ff değil). Doğrudan API'ye gidip Firefox'ta bir istisna eklemek sorunu çözdü.

Benim için bir sunucu tarafı JsonSerializerException neden oldu.

Newtonsoft.Json.JsonSerializationException isteği yürütülürken işlenmeyen bir istisna oluştu: Kendine referanslama döngüsü türü ile algılandı ...

Müşteri şöyle dedi:

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

Döngüleri ortadan kaldırarak yanıt türünü daha basit hale getirmek sorunu çözdü.

Arka uç olarak Laravel kullanıyorsanız, Angular veya IONIC projenizdeki CROS sorununu çözmek için .htaccess dosyanızı bu kodu yapıştırarak düzenleyin.

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

Sunucunuzun anladığı geçerli bir istemci sertifikası ve belirteç vermezseniz benzer bir hata oluşabilir:

Hata:

HTTP hatası yanıtı (bilinmeyen url): 0 Bilinmeyen Hata

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

}

Her iki unutmayın MyClientCert& MyTokendolayısıyla hata boş dizelerdir.
MyClientCert& MyTokensunucunuzun anladığı herhangi bir ad olabilir.

Geliştirme sırasında Angular'ın 4200 numaralı bağlantı noktasından geçen 5000 ve 5001 bağlantı noktalarında bir proxy oluşturan ASP.NET SPA Uzantıları kullanıyorum.

CORS'u 5001 numaralı https bağlantı noktası için doğru bir şekilde ayarlamıştım ve her şey yolundaydı, ancak yanlışlıkla 5000 bağlantı noktası için olan eski bir yer işaretine gittim. Sonra aniden bu mesaj ortaya çıktı. Başkalarının konsolda dediği gibi bir 'ön kontrol' hata mesajı vardı.

Bu nedenle, ortamınız ne olursa olsun, CORS kullanıyorsanız, her ikisi de önemli olduğundan, tüm bağlantı noktalarını belirlediğinizden emin olun.

İsteklerimin tamamlanması 2 dakikadan fazla sürdüğünde tam olarak bu mesajı alıyordum. Tarayıcının istekle bağlantısı kesiliyordu, ancak arka uçtaki istek, tamamlanana kadar devam etti. Sunucu (benim durumumda ASP.NET Web API) bağlantıyı kesmeyi algılamıyor.

Bütün bir gün aradıktan sonra, sonunda bu cevabı buldum ve proxy yapılandırmasını kullanırsanız, varsayılan zaman aşımı 120 saniye (veya 2 dakika) olduğunu açıkladım .

Böylece, proxy yapılandırmanızı düzenleyebilir ve ihtiyacınız olana ayarlayabilirsiniz:

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

Şimdi, NTLM kimlik doğrulaması ile çalışmasını sağlamak için agentkeepalive kullanıyordum ve aracının zaman aşımının proxy'nin zaman aşımı ile ilgisi olmadığını bilmiyordum, bu nedenle her ikisinin de ayarlanması gerekiyor. Bunu anlamam biraz zaman aldı, işte bir örnek:

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

Benim için bu bir tarayıcı sorunuydu, çünkü isteklerim Postman'da iyi çalışıyordu.

Firefox ve Chrome'un 6000, ASP.NET API bağlantı noktasını değiştirdiğimde bağlantı noktasına giden istekleri bir nedenle engellediği 4000, hatanın düzeltebileceğim bilinen bir CORS hatasıyla değiştiği ortaya çıktı.

Chrome en azından bana gösterdi, ERR_UNSAFE_PORTbu da bana neyin yanlış olabileceği konusunda bir ipucu verdi.

Yerinde uygun bir cors başlığınız varsa. Kurumsal ağınız, cors başlığını çıkarıyor olabilir. Web sitesine dışarıdan erişilebiliyorsa, soruna ağın neden olup olmadığını doğrulamak için ağınızın dışından erişmeyi deneyin - nedeni ne olursa olsun iyi bir fikirdir.

Asp.net çekirdeğinde, api denetleyicinizin çağrılan ek açıklaması yoksa [AllowAnonymous], bunu denetleyici adınızın üstüne ekleyin.

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

Diğer sorular kadar eski değil mi, ama sadece bir İon-laravel uygulamasında bu mücadele ve hiçbir şey yüklü bu yüzden, burada (ve diğer mesajların) çalışır https://github.com/barryvdh/laravel-cors içinde tamamlayıcısı Laravel ve başladı ve oldukça iyi çalışıyor.

Benimki, sorgulamaya çalıştığım modellerde geçersiz bir ilişkiden kaynaklanıyordu. İlişkide çöktüğü yanıtı hata ayıklayarak çözdü.

Benim için açısal bir sorun değildi. Veritabanında (0000-00-00) değerine sahip DateTime türünde bir alandı ve modelim bu özelliği doğru şekilde bağlayamadı, bu nedenle (2019-08-12) gibi geçerli bir değere değiştirdim.

.Net core, OData v4 ve MySql (EF pomelo konektörü) kullanıyorum

Bu Kodları bağlantı dosyanıza ekleyin

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

Bu bir düğüm hizmetiyse, burada özetlenen adımları deneyin

Temel olarak, Kökenler Arası Kaynak Paylaşımı (CORS) hatasıdır. Bu tür hatalar hakkında daha fazla bilgiyi burada bulabilirsiniz .

Düğüm hizmetimi aşağıdaki satırlarla güncelledikten sonra çalıştı:

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

Benim hatam, dosyanın çok büyük olmasıydı (dotnet çekirdeğinin @ ~ 25Mb'lik bir sınırı var gibi görünüyor). Ayar

• maxAllowedContentLength to 4294967295 (maksimum uint değeri) web.config içinde
• denetleyici eylemini [DisableRequestSizeLimit] ile dekore etme
• services.Configure (seçenekler => {options.MultipartBodyLengthLimit = 4294967295;}); Startup.cs içinde

benim için sorunu çözdü.