Naudoju Angular 4 HttpClient
, kad siųsčiau užklausas į išorinę paslaugą. Tai labai standartinė sąranka:
this.httpClient.get(url).subscribe(response => {
//do something with response
}, err => {
console.log(err.message);
}, () => {
console.log('completed');
}
Problema ta, kad kai užklausa nepavyksta, aš matau bendrąjį
Http failure response for (unknown url): 0 Unknown Error
pranešimą konsolėje. Tuo tarpu, kai patikrinu nepavykusią užklausą "Chrome", matau, kad atsakymo būsena yra 422, o skirtuke "peržiūra" matau tikrąjį pranešimą, kuriame aprašoma nesėkmės priežastis.
Kaip pasiekti tikrąjį atsakymo pranešimą, kurį matau chrome dev tools?
Problema buvo susijusi su CORS. Pastebėjau, kad "Chrome" konsolėje atsirado dar viena klaida: Prašomame išteklyje nėra 'Access-Control-Allow-Origin' antraštės. Todėl prieiga prie origin 'http://localhost:4200' neleidžiama. Atsakymas turėjo HTTP būsenos kodą 422.`
Tai reiškia, kad atsakyme iš galinio serverio nebuvo Access-Control-Allow-Origin
antraštės, nors galinis serveris nginx buvo sukonfigūruotas pridėti šias antraštes į atsakymus naudojant add_header
direktyvą.
Tačiau ši direktyva prideda antraštes tik tada, kai atsakymo kodas yra 20X arba 30X. Klaidų atsakymuose antraščių nebuvo. Man reikėjo naudoti parametrą always
, kad antraštės būtų pridėtos nepriklausomai nuo atsakymo kodo:
add_header 'Access-Control-Allow-Origin' 'http://localhost:4200' always;
Tinkamai sukonfigūravęs galinę dalį, galėjau pasiekti faktinį klaidos pranešimą "Angular" kode.
Man ją sukėlė serverio pusės JsonSerializerException.
Vykdant užklausą įvyko neaptarnauta išimtis Newtonsoft.Json.JsonSerializationException: Jgt.Jgt.Jgt.Jgt.Jgt.Jgt.Jgt.Jgt.Jgt. aptikta su tipu ...
Klientas pasakė:
POST http://localhost:61495/api/Action net::ERR_INCOMPLETE_CHUNKED_ENCODING
ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}
Atsakymo tipo supaprastinimas pašalinant kilpas išsprendė problemą.
Jei naudojate "Laravel" kaip savo galinę versiją, redaguokite savo .htaccess failą, įkeldami šį kodą, kad išspręstumėte CROS problemą savo "Angular" arba "IONIC" projekte.
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"