typescript - Angular HttpClient "Http-fel vid parsning"

Jag försöker skicka en POST-förfrågan från Angular 4 till min Laravel-backend.

Min LoginService har den här metoden:

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

Jag prenumererar på denna metod i min LoginComponent:

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

Och detta är min Laravel-backendmetod:

...

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

return response('Unauthorized', 401);

Mina Chrome-utvecklarverktyg säger att min förfrågan var framgångsrik med statuskoden 200. Men min Angular-kod triggar error-blocket och ger mig detta meddelande:

Http-fel vid analys för http://10.0.1.19/api/login

Om jag returnerar en tom array från min backend fungerar det... Så Angular försöker tolka mitt svar som JSON? Hur kan jag inaktivera detta?

Svar #1

Du kan ange att de data som ska returneras inte är JSON med responseType.

I ditt exempel kan du använda ett responseType-strängvärde av text:

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

Den fullständiga listan över alternativ för responseType är:

  • json (standard)
  • text
  • arraybuffer
  • blob

Se dokumentationen för mer information.

Svar #2

Jag vill bara tillägga att du måste utelämna den generiska argumentet på get/post-metoden (.get<T>).

✔️ Detta kommer att fungera:

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

❌ Detta kommer inte att fungera:

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

Den senare kommer att ge ett fel:

Den förväntade typen kommer från egenskapen 'responseType' som deklareras här på typen '{ headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: "events"; context?: HttpContext | undefined; params?: HttpParams | { ...; } | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }'

Svar #3

om du har alternativ

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

Relaterade artiklar