Angular HttpClient „Błąd HTTP podczas analizowania”

107

Próbuję wysłać żądanie POST z Angular 4 do mojego zaplecza Laravel.

Moja usługa logowania ma następującą metodę:

login(email: string, password: string) {
    return this.http.post(`http://10.0.1.19/login`, { email, password })
}

Subskrybuję tę metodę w moim komponencie LoginComponent:

.subscribe(
    (response: any) => {
        console.log(response)
        location.reload()
    }, 
    (error: any) => {
        console.log(error)
    })

A to jest moja metoda backendu Laravel:

...

if($this->auth->attempt(['email' => $email, 'password' => $password], true)) {
  return response('Success', 200);
}

return response('Unauthorized', 401);

Moje narzędzia dla programistów Chrome mówią, że moja prośba zakończyła się sukcesem z 200 kodami stanu. Ale mój kod Angular wyzwala errorblok i wyświetla następujący komunikat:

Błąd HTTP podczas analizowania adresu http://10.0.1.19/api/login

Jeśli zwrócę pustą tablicę z mojego zaplecza, działa ... Więc Angular próbuje przeanalizować moją odpowiedź jako JSON? Jak mogę to wyłączyć?

angular typescript angular-httpclient

— nutzt
źródło

235

Możesz określić, że zwracane dane nie są w formacie JSON przy użyciu responseType.

W swoim przykładzie możesz użyć responseTypewartości ciągu text, na przykład:

return this.http.post(
    'http://10.0.1.19/login',
    {email, password},
    {responseType: 'text'})

Pełna lista opcji dla responseType:

json (domyślny)
text
arraybuffer
blob

Więcej informacji można znaleźć w dokumentacji .

— Kirk Larkin
źródło

17

jeśli masz opcje

return this.http.post(`${this.endpoint}/account/login`,payload, { ...options, responseType: 'text' })

— Trần Quang Hiệp
źródło

3

Nawet dodając responseType, radziłem sobie z tym przez wiele dni bez powodzenia. W końcu to dostałam. Upewnij się, że w swoim skrypcie zaplecza nie definiujesz nagłówka jako - ("Content-Type: application / json);

Ponieważ, jeśli zamienisz go na tekst, ale backend poprosi o json, zwróci błąd ...

— Shemi
źródło

Możesz także ustawić jako parametry dla nowego obiektu pochodzącego z nowej klasy. następnie zwróć ten obiekt jako odpowiedź. czyli możesz zmienić swoją odpowiedź na format JSON

— whitefang

1

Powinieneś także sprawdzić JSON (nie w DevTools, ale na zapleczu). Angular HttpClient mający trudności z analizowaniem JSON ze \0znakami i DevTools zignoruje wtedy, więc trudno go zauważyć w Chrome.

Na podstawie tego artykułu

— druss
źródło

1

Miałem ten sam problem, a przyczyna była taka, że w momencie zwracania łańcucha w Twoim zapleczu (sprężynie) mógłbyś zwracać jako powrót „używana sprężyna”; Ale to nie jest analizowane zgodnie z wiosną. Zamiast tego użyj powrotu "\" użyta sprężyna \ ""; -Odejdź

— AVI
źródło

Z recenzji: Cześć, ten post nie wydaje się stanowić dobrej odpowiedzi na to pytanie. Edytuj swoją odpowiedź i popraw ją lub po prostu opublikuj jako komentarz.

— sɐunıɔ ןɐ qɐp

W porządku… TAK np. w mojej sytuacji używałem Springa jako backendu i Angulara jako frontendu. Po poprawnym uwierzytelnieniu mój serwer Spring musi zwrócić mi ciąg „ważny”, który jest przetwarzany tylko wtedy, gdy dane logowania są poprawne.

— AVI

Problem z moim programem był podobny tj. Błąd HTTP podczas analizowania .... Wtedy zdałem sobie sprawę, że wiosna rozważa "odpowiedź mojego serwera jako znak specjalny. Dlatego musiałem zwrócić ciąg, który zaplecze również może zrozumieć ... Więc zwróciłem" \ "prawidłowe \" " zamiast "prawidłowy" i \ notacja w sieci WWW jest używany do określenia "(odwróconego przecinka) wpisanego wewnątrz odwróconych przecinków w ciągu {" \ "\" "zamiast" "" "}. A potem nigdzie nie było widać tego błędu. Mam nadzieję, że teraz jest bardziej jasny @ sɐunıɔ ןɐ qɐp

— AVI

0

Miałem ten sam problem w mojej aplikacji Angular. Używałem RocketChat REST API w mojej aplikacji i próbowałem użyć rooms.createDiscussion, ale jako błąd, jak poniżej.

ERROR Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":200,"statusText":"OK","url":"myurl/rocketchat/api/v1/rooms.createDiscussion","ok":false,"name":"HttpErrorResponse","message":"Http failure during parsing for myrul/rocketchat/api/v1/rooms.createDiscussion","error":{"error":{},"text":"

Próbowałem kilku rzeczy, takich jak zmiana, responseType: 'text'ale żadna z nich nie działała. W końcu udało mi się znaleźć problem z moją instalacją RocketChat. Jak wspomniano w dzienniku zmian RocketChat, API rooms.createDiscussionzostało wprowadzone w wersji 1.0.0, niestety używałem niższej wersji.

Sugeruję, aby sprawdzić, czy REST API działa dobrze lub nie, zanim poświęcisz czas na naprawienie błędu w kodzie Angular. Użyłem curlpolecenia, żeby to sprawdzić.

curl -H "X-Auth-Token: token" -H "X-User-Id: userid" -H "Content-Type: application/json" myurl/rocketchat/api/v1/rooms.createDiscussion -d '{ "prid": "GENERAL", "t_name": "Discussion Name"}'

Tam również otrzymałem nieprawidłowy kod HTML jako odpowiedź.

<!DOCTYPE html>
<html>
<head>
<meta name="referrer" content="origin-when-crossorigin">
<script>/* eslint-disable */

'use strict';
(function() {
        var debounce = function debounce(func, wait, immediate) {

Zamiast prawidłowej odpowiedzi JSON w następujący sposób.

{
    "discussion": {
        "rid": "cgk88DHLHexwMaFWh",
        "name": "WJNEAM7W45wRYitHo",
        "fname": "Discussion Name",
        "t": "p",
        "msgs": 0,
        "usersCount": 0,
        "u": {
            "_id": "rocketchat.internal.admin.test",
            "username": "rocketchat.internal.admin.test"
        },
        "topic": "general",
        "prid": "GENERAL",
        "ts": "2019-04-03T01:35:32.271Z",
        "ro": false,
        "sysMes": true,
        "default": false,
        "_updatedAt": "2019-04-03T01:35:32.280Z",
        "_id": "cgk88DHLHexwMaFWh"
    },
    "success": true
}

Tak więc po aktualizacji do najnowszego RocketChat mogłem korzystać ze wspomnianego REST API.

— Sibeesh Venu
źródło