Harici servise istek göndermek için Angular 4 HttpClient
kullanıyorum. Bu ç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 genel bir
(Bilinmeyen url) için http hatası yanıtı: Konsolda 0 Bilinmeyen Hata
mesajı. Bu arada, başarısız isteği chrome'da incelediğimde yanıt durumunun 422 olduğunu görebiliyorum ve "preview" sekmesinde başarısızlık nedenini açıklayan gerçek mesajı görüyorum.
Chrome geliştirme araçlarında görebildiğim gerçek yanıt mesajına nasıl erişebilirim?
Sorun CORS ile ilgiliydi. Chrome konsolunda başka bir hata olduğunu fark ettim:
İstenen kaynakta 'Access-Control-Allow-Origin' başlığı yok. Köken 'http://localhost:4200' bu nedenle erişime izin verilmiyor. Yanıt HTTP durum kodu 422'ye sahipti.`
Bu, arka uç nginx bu başlıkları add_header
yönergesi ile yanıtlara eklemek üzere yapılandırılmış olmasına rağmen arka uç sunucusundan gelen yanıtta Access-Control-Allow-Origin
başlığının eksik olduğu anlamına gelir.
Ancak, bu yönerge yalnızca yanıt kodu 20X veya 30X olduğunda başlıkları ekler. Hata yanıtlarında başlıklar eksikti. Yanıt kodundan bağımsız olarak başlığın eklendiğinden emin olmak için always
parametresini kullanmam gerekiyordu:
add_header 'Access-Control-Allow-Origin' 'http://localhost:4200' always;
Arka uç doğru şekilde yapılandırıldıktan sonra Angular kodundaki gerçek hata mesajına erişebildim.
Benim için sunucu tarafındaki bir JsonSerializerException'dan kaynaklanıyordu.
İstek yürütülürken işlenmemiş bir istisna oluştu Newtonsoft.Json.JsonSerializationException: Kendine referans veren döngü tipi ile tespit edildi ...
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ı sadece bu kodu yapıştırarak düzenleyin
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"