HttpClient angolare "Http failure during parsing"

107

Provo a inviare una richiesta POST da Angular 4 al mio backend Laravel.

Il mio LoginService ha questo metodo:

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

Mi iscrivo a questo metodo nel mio LoginComponent:

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

E questo è il mio metodo di backend Laravel:

...

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

return response('Unauthorized', 401);

I miei strumenti di sviluppo di Chrome dicono che la mia richiesta è stata un successo con il codice di stato 200. Ma il mio codice Angular attiva il errorblocco e mi dà questo messaggio:

Errore HTTP durante l'analisi per http://10.0.1.19/api/login

Se restituisco un array vuoto dal mio backend, funziona ... Quindi Angular sta cercando di analizzare la mia risposta come JSON? Come posso disabilitarlo?

angular typescript angular-httpclient

— nutzt
fonte

235

È possibile specificare che i dati da restituire non siano JSON utilizzando responseType.

Nel tuo esempio, puoi utilizzare un responseTypevalore stringa di text, come questo:

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

L'elenco completo delle opzioni per responseTypeè:

json (il predefinito)
text
arraybuffer
blob

Vedere la documentazione per ulteriori informazioni.

— Kirk Larkin
fonte

17

se hai delle opzioni

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

— Trần Quang Hiệp
fonte

3

Anche aggiungendo responseType, l'ho affrontato per giorni senza successo. Alla fine l'ho ottenuto. Assicurati che nello script di backend non definisci l'intestazione come - ("Content-Type: application / json);

Perché se lo trasformi in testo ma il backend chiede json, restituirà un errore ...

— Shemi
fonte

Inoltre è possibile impostare come parametri un nuovo oggetto derivato dalla nuova classe. quindi restituisci questo oggetto come risposta. cioè puoi cambiare la tua risposta al formato JSON

— whitefang

1

Dovresti anche controllare il tuo JSON (non in DevTools, ma su un backend). Angular HttpClient ha difficoltà ad analizzare JSON con i \0caratteri e DevTools lo ignorerà, quindi è abbastanza difficile da individuare in Chrome.

Basato su questo articolo

— druss
fonte

1

Ho avuto lo stesso problema e la causa era che al momento di restituire una stringa nel tuo backend (primavera) potresti tornare come "molla usata"; Ma questo non viene analizzato correttamente in base alla primavera. Usa invece return "\" spring used \ ""; -Pace fuori

— AVI
fonte

Dalla recensione: Ciao, questo post non sembra fornire una risposta di qualità alla domanda. Modifica la tua risposta e migliorala, oppure pubblicala come commento.

— sɐunıɔ ןɐ qɐp

Va bene..SO per es. nella mia situazione stavo usando Spring come backend e Angular come frontend. Dopo la corretta autenticazione il mio server primaverile deve restituirmi una stringa "valid" che viene elaborata solo se le informazioni di accesso sono corrette.

— AVI

Il problema con il mio programma era simile, ad es. Http failure durante l'analisi ... Poi mi sono reso conto che la primavera sta considerando "la risposta del mio server come carattere speciale. Quindi, ho dovuto restituire una stringa che il backend può anche capire ... Quindi ho restituito" \ "valid \" " invece di "valido" e \ notation in web viene utilizzato per specificare un "(virgola invertita) scritto all'interno delle virgolette della stringa {" \ "\" "invece di" "" "}. E dopo che l'errore non si è visto da nessuna parte ... spero che sia più chiaro ora @ sɐunıɔ ןɐ qɐp

— AVI

0

Stavo affrontando lo stesso problema nella mia applicazione Angular. Stavo usando l'API REST di RocketChat nella mia applicazione e stavo cercando di utilizzare il rooms.createDiscussion, ma come errore come di seguito.

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

Ho provato un paio di cose come cambiare il responseType: 'text'ma nessuna di queste ha funzionato. Alla fine sono stato in grado di scoprire che il problema era con la mia installazione di RocketChat. Come menzionato nel registro delle modifiche di RocketChat, l'APIrooms.createDiscussion è stata introdotta nella versione 1.0.0, purtroppo stavo usando una versione inferiore.

Il mio suggerimento è di controllare che l'API REST funzioni correttamente o meno prima di dedicare tempo alla correzione dell'errore nel codice Angular. Ho usato il curlcomando per verificarlo.

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"}'

Anche lì ricevevo un HTML non valido come risposta.

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

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

Invece di una risposta JSON valida come segue.

{
    "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
}

Quindi, dopo l' aggiornamento all'ultima RocketChat, sono stato in grado di utilizzare l'API REST menzionata.

— Sibeesh Venu
fonte