web-dev-qa-db-fra.com

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

J'essaie d'envoyer une demande POST de 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 souscris à cette méthode dans mon LoginComponent:

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

Et voici ma méthode d'arrière-plan Laravel:

...

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

return response('Unauthorized', 401);

Mes Chrome outils de développement indiquent que ma demande a abouti avec 200 codes d'état. Mais mon code Angular déclenche le bloc error et me donne le message suivant:

Echec de HTTP lors de l'analyse syntaxique pour http://10.0.1.19/api/login

Si je renvoie un tableau vide à partir de mon backend, cela fonctionne ... Alors, Angular tente d'analyser ma réponse au format JSON? Comment puis-je désactiver cela?

angulartypescriptangular-httpclient
65
nutzt

Vous pouvez spécifier que les données à renvoyer sont et non JSON à l'aide de responseType.

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

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

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

Voir le docs pour plus d'informations.

142
Kirk Larkin

si vous avez des options

return this.http.post(`${this.endpoint}/account/login`,payload, { ...options, responseType: 'text' })
11
Trần Quang Hiệp

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 ...

2
Shemi

Je rencontrais le même problème dans mon application Angular. J'utilisais l'API RocketChat REST 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é quelques choses comme changer le responseType: 'text' mais aucune d'entre elles n'a fonctionné. À la fin, j'ai pu constater que le problème était lié à l'installation de RocketChat. Comme mentionné dans le journal des modifications de RocketChat , l'API rooms.createDiscussion a été introduite dans la version 1.0.0. Malheureusement, j'utilisais une version inférieure.

Ma suggestion est de vérifier si l'API REST fonctionne correctement avant de passer du temps à corriger l'erreur dans votre code Angular. J'ai utilisé la commande curl 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 non valide en 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
}

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

0
Sibeesh Venu

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

Basé sur cet article

0
druss