Angular HttpClient «Échec de Http lors de l'analyse»

107

J'essaye d'envoyer une demande POST d'Angular 4 à mon backend Laravel.

Mon LoginService a cette méthode:

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

Je m'abonne à cette méthode dans mon LoginComponent:

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

Et voici ma méthode de backend Laravel:

...

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

return response('Unauthorized', 401);

Mes outils de développement Chrome indiquent que ma demande a été un succès avec un code d'état 200. Mais mon code Angular déclenche le errorbloc et me donne ce message:

Échec HTTP lors de l'analyse de http://10.0.1.19/api/login

Si je retourne un tableau vide de mon backend, cela fonctionne ... Donc Angular essaie d'analyser ma réponse en JSON? Comment puis-je désactiver cela?

angular typescript angular-httpclient

— nutzt
source

235

Vous pouvez spécifier que les données à renvoyer ne sont pas en utilisant JSON responseType.

Dans votre exemple, vous pouvez utiliser une responseTypevaleur de chaîne de text, comme ceci:

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

La liste complète des options pour responseTypeest:

json (le défaut)
text
arraybuffer
blob

Consultez la documentation pour plus d'informations.

— Kirk Larkin
source

17

si vous avez des options

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

— Trần Quang Hiệp
source

3

Même en ajoutant responseType, je l'ai traité pendant des jours sans succès. Je l'ai finalement eu. Assurez-vous que dans votre script backend vous ne définissez pas l'en-tête comme - ("Content-Type: application / json);

Car si vous le transformez en texte mais que le backend demande json, il renverra une erreur ...

— Shemi
source

Vous pouvez également définir comme paramètres un nouvel objet dérivé d'une nouvelle classe. puis renvoyez cet objet comme réponse. c'est-à-dire que vous pouvez changer votre réponse au format JSON

— whitefang

1

Vous devriez également vérifier votre JSON (pas dans DevTools, mais sur un backend). Angular HttpClient ayant du mal à analyser JSON avec des \0caractères et DevTools l'ignorera alors, il est donc assez difficile à repérer dans Chrome.

Basé sur cet article

— druss
source

1

J'ai eu le même problème et la cause était qu'au moment de renvoyer une chaîne dans votre backend (ressort), vous pourriez revenir en tant que retour "spring used"; Mais ce n'est pas analysé correctement en fonction du printemps. Utilisez à la place le retour "\" spring used \ ""; -Paix

— AVI
source

De l'avis: Salut, cet article ne semble pas fournir une réponse de qualité à la question. Veuillez modifier votre réponse et l'améliorer, ou simplement la publier sous forme de commentaire.

— sɐunıɔ ןɐ qɐp

Très bien..SO pour par exemple. dans ma situation, j'utilisais Spring comme backend et Angular en frontend. Après l'authentification correcte, mon serveur Spring doit me renvoyer une chaîne "valide" qui n'est traitée que si les informations de connexion sont correctes.

— AVI

Le problème avec mon programme était similaire à savoir. Échec de HTTP lors de l'analyse .... Ensuite, j'ai réalisé que Spring considérait "la réponse de mon serveur comme un caractère spécial. Par conséquent, j'ai dû renvoyer une chaîne que le backend peut également comprendre ... J'ai donc renvoyé" \ "valide \" " au lieu de "valide" et la notation \ en web est utilisée pour spécifier un "(virgule inversée) écrit à l'intérieur des virgules inversées de la chaîne {" \ "\" "au lieu de" "" "}. Et après cette erreur était nulle part à voir..J'espère que c'est plus clair maintenant @ sɐunıɔ ןɐ qɐp

— AVI

0

J'étais confronté au même problème dans mon application Angular. J'utilisais l'API REST RocketChat dans mon application et j'essayais d'utiliser le rooms.createDiscussion, mais comme une erreur comme ci-dessous.

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

J'ai essayé deux choses comme changer le responseType: 'text'mais aucune d'elles n'a fonctionné. À la fin, j'ai pu trouver que le problème était lié à mon installation RocketChat. Comme mentionné dans le journal des modifications de RocketChat, l'API a rooms.createDiscussionété introduite dans la version 1.0.0, malheureusement, j'utilisais une version inférieure.

Ma suggestion est de vérifier que l'API REST fonctionne correctement ou non avant de passer du temps à corriger l'erreur dans votre code angulaire. J'ai utilisé la curlcommande pour vérifier cela.

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

Là aussi, je recevais un HTML invalide en guise de réponse.

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

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

Au lieu d'une réponse JSON valide comme suit.

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

Donc, après la mise à jour vers la dernière RocketChat, j'ai pu utiliser l'API REST mentionnée.

— Sibeesh Venu
source