Angular HttpClient "Error de HTTP durante el análisis"

106

Intento enviar una solicitud POST desde Angular 4 a mi backend de Laravel.

Mi LoginService tiene este método:

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

Me suscribo a este método en mi LoginComponent:

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

Y este es mi método de backend de Laravel:

...

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

return response('Unauthorized', 401);

Mis herramientas de desarrollo de Chrome dicen que mi solicitud fue un éxito con el código de estado 200. Pero mi código Angular activa el errorbloque y me da este mensaje:

Error de Http durante el análisis de http://10.0.1.19/api/login

Si devuelvo una matriz vacía de mi backend, funciona ... ¿Entonces Angular está tratando de analizar mi respuesta como JSON? ¿Cómo puedo desactivar esto?

angular typescript angular-httpclient

— nutzt
fuente

231

Puede especificar que los datos que se devolverán no sean JSON responseType.

En su ejemplo, puede usar un responseTypevalor de cadena de text, como este:

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

La lista completa de opciones para responseTypees:

json (el valor por defecto)
text
arraybuffer
blob

Consulte los documentos para obtener más información.

— Kirk Larkin
fuente

17

si tienes opciones

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

— Trần Quang Hiệp
fuente

3

Incluso agregando responseType, lo manejé durante días sin éxito. Finalmente lo tengo. Asegúrese de que en su secuencia de comandos de backend no defina el encabezado como - ("Content-Type: application / json);

Porque si lo convierte en texto pero el backend solicita json, devolverá un error ...

— Shemi
fuente

También puede establecer como parámetros un nuevo objeto derivado de una nueva clase. luego devuelva este objeto como respuesta. es decir, puede cambiar su respuesta al formato JSON

— whitefang

1

También debe verificar su JSON (no en DevTools, sino en un backend). Angular HttpClient tiene dificultades para analizar JSON con \0caracteres y DevTools lo ignorará, por lo que es bastante difícil de detectar en Chrome.

Basado en este artículo

— druss
fuente

1

Tuve el mismo problema y la causa fue que en el momento de devolver una cadena en su backend (primavera), podría estar devolviendo como retorno "primavera usada"; Pero esto no se analiza correctamente según la primavera. En su lugar, use return "\" resorte usado \ ""; -Tranquilízate

— AVI
fuente

De la opinión: Hola, esta publicación no parece proporcionar una respuesta de calidad a la pregunta. Edite su respuesta y mejórela, o simplemente publíquela como un comentario.

— sɐunıɔ ןɐ qɐp

Muy bien .. SO por ejemplo. en mi situación, estaba usando Spring como backend y Angular en frontend. Después de la autenticación correcta, mi servidor Spring tiene que devolverme una cadena "válida" que se procesa solo si la información de inicio de sesión es correcta.

— AVI

El problema con mi programa fue similar, es decir. Error de HTTP durante el análisis ... Entonces me di cuenta de que Spring está considerando "la respuesta de mi servidor como un carácter especial. Por lo tanto, tuve que devolver una cadena que el backend también puede entender ... Así que devolví" \ "válido \" " en lugar de "válido" y la notación \ en web se usa para especificar un "(coma invertido) escrito dentro de las comas invertidas de la cadena {" \ "\" "en lugar de" "" "}. Y después de ese error no se veía por ninguna parte ... Espero que sea más claro ahora @ sɐunıɔ ןɐ qɐp

— AVI

0

Estaba enfrentando el mismo problema en mi aplicación Angular. Estaba usando la API REST de RocketChat en mi aplicación y estaba tratando de usar rooms.createDiscussion, pero como un error como se muestra a continuación.

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

He intentado un par de cosas como cambiar el responseType: 'text'pero ninguna funcionó. Al final, pude encontrar que el problema estaba en mi instalación de RocketChat. Como se menciona en el registro de cambios de RocketChat, la API rooms.createDiscussionse introdujo en la versión 1.0.0, desafortunadamente, estaba usando una versión inferior.

Mi sugerencia es verificar que la API REST esté funcionando bien o no antes de dedicar tiempo a corregir el error en su código Angular. Usé el curlcomando para verificar eso.

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

Allí también recibí un HTML no válido como respuesta.

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

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

En lugar de una respuesta JSON válida de la siguiente manera.

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

Entonces, después de actualizar a la última versión de RocketChat , pude usar la API REST mencionada.

— Sibeesh Venu
fuente