Website-Suche

typescript - Angular HttpClient „HTTP-Fehler beim Parsen“

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 dies ist meine Laravel-Backend-Methode:

...

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

return response('Unauthorized', 401);

Meine Chrome-Entwicklertools sagen, dass meine Anfrage mit dem Statuscode 200 erfolgreich war. Aber mein Angular-Code löst den error-Block aus und gibt mir diese Nachricht:

HTTP-Fehler während der Analyse 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 parsen? Wie kann ich das deaktivieren?

Antwort #1

Sie können angeben, dass die zurückzugebenden Daten nicht JSON sind, indem Sie responseType verwenden.

In Ihrem Beispiel können Sie einen responseType-Stringwert von text verwenden:

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

Die vollständige Liste der Optionen für responseType ist:

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

Siehe die Dokumentation für weitere Informationen.

Antwort #2

Ich möchte nur hinzufügen, dass Sie das generische Argument weglassen müssen bei der Get/Post-Methode (.get<T>).

✔️ Das wird funktionieren:

this.http.get(`https://myapi.com/health`, {responseType: 'text'})

❌ Das wird nicht funktionieren:

this.http.get<string>(`https://myapi.com/health`, {responseType: 'text'})

Letzteres wird einen Fehler erzeugen:

Der erwartete Typ stammt von der Eigenschaft 'responseType', die hier auf dem Typ '{ headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: "events"; context?: HttpContext | undefined; params?: HttpParams | { ...; } | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }' deklariert ist

Antwort #3

wenn du Optionen hast

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

Verwandte Artikel