103 votes

Angular HttpClient "Échec Http lors de l'analyse"

J'essaie d'envoyer une requête POST à partir Angulaire de 4 à mon Laravel backend.

Mon LoginService a cette méthode:

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

Je souscris à cette méthode dans mon LoginComponent:

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

Et c'est mon Laravel backend méthode:

...

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

return response('Unauthorized', 401);

Mon Chrome dev tools dit que ma demande a été un succès avec code d'état 200. Mais mon Angulaire de code déclenche error bloc et me donne ce message:

Http échec lors de l'analyse de http://10.0.1.19/api/login

Si je retourne un tableau vide de mon backend, il fonctionne... Donc Angulaire est d'essayer d'analyser ma réponse JSON? Comment puis-je désactiver cette option?

227voto

Kirk Larkin Points 29405

Vous pouvez spécifier que les données à renvoyer est pas JSON à l'aide de l' responseType.

Dans votre exemple, vous pouvez utiliser un responseType chaîne de valeur de text, comme ceci:

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

D'autres options sont json (valeur par défaut), arraybuffer et blob.

Voir les docs pour plus d'informations.

17voto

si vous avez des options

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

2voto

Shemi Points 21

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 header comme - ("Content-Type: application / json);

Parce que si vous le convertissez en texte mais que le serveur demande json, il renverra une erreur ...

1voto

druss Points 31

Vous devriez également vérifier votre code JSON (pas dans DevTools, mais sur un backend). Angular HttpClient éprouve de la difficulté à analyser JSON avec \0 caractères et DevTools l'ignorera à ce moment-là. Il est donc assez difficile de la repérer dans Chrome.

Basé sur cet article

0voto

Sibeesh Venu Points 4473

J'ai été confrontée au même problème dans ma Angulaire de l'application. J'ai été en utilisant RocketChat API REST dans mon application et j'ai essayé d'utiliser l' 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é pas mal de choses comme la modification de la responseType: 'text' , mais aucun d'entre eux travaillaient. À la fin, j'ai été en mesure de trouver le problème était avec mon RocketChat de l'installation. Comme mentionné dans le RocketChat journal des modifications de l'API rooms.createDiscussion a été introduit dans la version 1.0.0, malheureusement, j'ai été en utilisant une version plus ancienne.

Ma suggestion est de vérifier le RESTE de l'API fonctionne bien ou pas avant de vous passer du temps à réparer l'erreur dans votre Angulaire de code. J'ai utilisé curl de commande pour vérifier que.

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 j'ai été faire un code HTML non valide comme une 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 véritable réponse JSON 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
}

Ainsi, après la mise à jour vers la dernière RocketChat j'ai été en mesure d'utiliser le mentionné API REST.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X