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
la source

Réponses:

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
la source
17

si vous avez des options

return this.http.post(`${this.endpoint}/account/login`,payload, { ...options, responseType: 'text' })
Trần Quang Hiệp
la 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
la 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
la 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
la 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
la source