Angular HttpClient "HTTP-Fehler beim Parsen"

105

Ich versuche, eine POST-Anfrage von Angular 4 an mein Laravel-Backend zu senden.

Mein LoginService hat diese Methode:

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

Ich abonniere diese Methode in meiner LoginComponent:

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

Und das ist meine Laravel-Backend-Methode:

...

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

return response('Unauthorized', 401);

Meine Chrome-Entwicklungstools besagen, dass meine Anfrage mit 200 Statuscodes erfolgreich war. Aber mein Winkelcode löst den errorBlock aus und gibt mir folgende Meldung:

HTTP-Fehler beim Parsen für http://10.0.1.19/api/login

Wenn ich ein leeres Array von meinem Backend zurückgebe, funktioniert es ... Also versucht Angular, meine Antwort als JSON zu analysieren? Wie kann ich das deaktivieren?

angular typescript angular-httpclient geworden
quelle

Antworten:

230

Sie können angeben, dass die zurückzugebenden Daten nicht von JSON verwendet werden responseType.

In Ihrem Beispiel können Sie einen responseTypeZeichenfolgenwert textwie folgt verwenden:

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

Die vollständige Liste der Optionen für responseTypelautet:

  • json (der Standard)
  • text
  • arraybuffer
  • blob

Weitere Informationen finden Sie in den Dokumenten .

Kirk Larkin
quelle
17

wenn Sie Optionen haben

return this.http.post(`${this.endpoint}/account/login`,payload, { ...options, responseType: 'text' })
Trần Quang Hiệp
quelle
3

Selbst wenn ich responseType hinzufügte, beschäftigte ich mich tagelang ohne Erfolg damit. Endlich hab ich es. Stellen Sie sicher, dass Sie in Ihrem Backend-Skript den Header nicht als - definieren ("Content-Type: application / json);

Wenn Sie es in Text umwandeln, das Backend jedoch nach json fragt, wird ein Fehler zurückgegeben ...

Shemi
quelle
Sie können auch als Parameter ein neues Objekt festlegen, das von einer neuen Klasse abgeleitet ist. Geben Sie dann dieses Objekt als Antwort zurück. dh Sie können Ihre Antwort auf das JSON-Format
ändern
1

Sie sollten auch JSON überprüfen (nicht in DevTools, sondern in einem Backend). Angular HttpClient, der es schwer hat, JSON mit \0Zeichen und DevTools zu analysieren, wird dann ignoriert, so dass es in Chrome ziemlich schwer zu erkennen ist.

Basierend auf diesem Artikel

druss
quelle
1

Ich hatte das gleiche Problem und die Ursache war, dass Sie zum Zeitpunkt der Rückgabe eines Strings in Ihrem Backend (spring) möglicherweise als return "spring used" zurückkehren. Aber das wird laut Frühling nicht richtig analysiert. Verwenden Sie stattdessen return "" spring used ""; -Entspann dich

AVI
quelle
Aus der Rezension: Hallo, dieser Beitrag scheint keine qualitativ hochwertige Antwort auf die Frage zu geben. Bitte bearbeiten Sie Ihre Antwort und verbessern Sie sie oder posten Sie sie einfach als Kommentar.
sɐunıɔ ןɐ qɐp
Okay ... SO für z. In meiner Situation habe ich Spring als Backend und Angular als Frontend verwendet. Nach der korrekten Authentifizierung muss mein Spring Server mir eine Zeichenfolge "gültig" zurückgeben, die nur verarbeitet wird, wenn die Anmeldeinformationen korrekt sind.
AVI
Das Problem mit meinem Programm war ähnlich, dh. HTTP-Fehler beim Parsen .... Dann wurde mir klar, dass Spring "meine Serverantwort als Sonderzeichen betrachtet. Daher musste ich eine Zeichenfolge zurückgeben, die das Backend auch verstehen kann ... Also gab ich" \ "valid \" "zurück. Anstelle von "gültig" und \ Notation im Web wird ein "(invertiertes Koma) angegeben, das in die Anführungszeichen der Zeichenfolge {" \ "\" "anstelle von" "" "} geschrieben wird. Und nachdem dieser Fehler nirgends zu sehen war, hoffe ich, dass er jetzt klarer ist @ sɐunıɔ ןɐ qɐp
AVI
0

Ich hatte das gleiche Problem in meiner Angular-Anwendung. Ich habe die RocketChat REST-API in meiner Anwendung verwendet und versucht, die zu verwenden rooms.createDiscussion, jedoch als Fehler wie unten.

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

Ich habe ein paar Dinge ausprobiert, wie das Ändern, responseType: 'text'aber keines davon hat funktioniert. Am Ende konnte ich feststellen, dass das Problem bei meiner RocketChat-Installation lag. Wie im RocketChat-Änderungsprotokoll erwähnt, wurde die API rooms.createDiscussionin der Version 1.0.0 eingeführt. Leider habe ich eine niedrigere Version verwendet.

Mein Vorschlag ist, zu überprüfen, ob die REST-API ordnungsgemäß funktioniert oder nicht, bevor Sie Zeit damit verbringen, den Fehler in Ihrem Angular-Code zu beheben. Ich habe den curlBefehl verwendet, um das zu überprüfen.

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

Auch dort bekam ich als Antwort einen ungültigen HTML-Code. 

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

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

Anstelle einer gültigen JSON-Antwort wie folgt. 

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

Nach dem Update auf den neuesten RocketChat konnte ich die erwähnte REST-API verwenden.

Sibeesh Venu
quelle