Използвам Angular 4 HttpClient
, за да изпращам заявки към външна услуга. Това е много стандартна настройка:
this.httpClient.get(url).subscribe(response => {
//do something with response
}, err => {
console.log(err.message);
}, () => {
console.log('completed');
}
Проблемът е, че когато заявката се провали, виждам общо съобщение
Http failure response for (unknown url): 0 Unknown Error
съобщение в конзолата. В същото време, когато проверявам неуспешната заявка в Chrome, виждам, че статусът на отговора е 422, а в раздела "preview" виждам действителното съобщение, описващо причината за неуспеха.
Как да получа достъп до действителното съобщение за отговор, което виждам в инструментите за разработка на Chrome?
Проблемът беше свързан с CORS. Забелязах, че в конзолата на Chrome има още една грешка: Не е налице 'Access-Control-Allow-Origin' хедър на искания ресурс. Поради това не е разрешен достъпът до произхода 'http://localhost:4200'. Отговорът е с HTTP статус код 422.`
Това означава, че в отговора от backend сървъра липсваше хедър Access-Control-Allow-Origin
, въпреки че backend nginx беше конфигуриран да добавя тези хедъри към отговорите с директивата add_header
.
Тази директива обаче добавя заглавия само когато кодът на отговора е 20X или 30X. При отговорите за грешки заглавията липсваха. Трябваше да използвам параметъра always
, за да се уверя, че заглавията се добавят независимо от кода на отговора:
add_header 'Access-Control-Allow-Origin' 'http://localhost:4200' always;
След като бекендът беше правилно конфигуриран, можех да получа достъп до действителното съобщение за грешка в кода на Angular.
При мен това беше причинено от изключването JsonSerializerException от страна на сървъра.
По време на изпълнението на заявката е възникнало необработено изключение Newtonsoft.Json.JsonSerializationException: Самонасочващ се цикъл открит с тип ...
Клиентът каза:
POST http://localhost:61495/api/Action net::ERR_INCOMPLETE_CHUNKED_ENCODING
ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}
Опростяването на типа на отговора чрез премахване на циклите реши проблема.
Ако използвате Laravel като бекенд, редактирайте файла .htaccess, като просто въведете този код, за да разрешите проблема CROS в проекта си Angular или IONIC.
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"