Angular HttpClient "Echec de l'analyse syntaxique".

Question

Angular HttpClient "Echec de l'analyse syntaxique".

Demandé el 25 de Septembre, 2017: Quand la question a-t-elle été
71549 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'essaie d'envoyer une requête POST depuis Angular 4 vers 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 backend Laravel :

...

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

return response('Unauthorized', 401);

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

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

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

Demandé el 25 de Septembre, 2017 par nutzt

Answer 1

5 Réponses

Answer 2

182voto

Kirk Larkin Points 29405

Vous pouvez spécifier que les données à retourner sont no JSON en utilisant le responseType .

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

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

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

Ver el docs pour plus d'informations.

Répondu el 25 de Septembre, 2017 par Kirk Larkin (29405 Points )

Answer 3

15voto

Trần Quang Hiệp Points 995

Si vous avez des options

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

Répondu el 2 de Février, 2018 par Trần Quang Hiệp (995 Points )

Answer 4

2voto

Shemi Points 21

Même en ajoutant responseType, je m'en suis occupé pendant des jours sans succès. Finalement, j'ai réussi. Assurez-vous que dans votre script backend vous ne définissez pas le header comme -("Content-Type : application/json) ;

Parce que si vous le transformez en texte mais que le backend demande du json, il retournera une erreur...

Répondu el 28 de Mars, 2019 par Shemi (21 Points )

Answer 5

0voto

Sibeesh Venu Points 4473

J'étais confronté au même problème dans mon application Angular. J'utilisais l'API REST de RocketChat dans mon application et j'essayais d'utiliser la fonction 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é plusieurs choses comme changer le responseType: 'text' mais aucune d'entre elles n'a fonctionné. J'ai fini par découvrir que le problème venait de mon installation de RocketChat. Comme indiqué dans le Journal des modifications de RocketChat l'API rooms.createDiscussion a été introduit dans la version 1.0.0 malheureusement j'utilisais une version inférieure.

Ma suggestion est de vérifier que l'API REST fonctionne bien ou non avant de passer du temps à corriger l'erreur dans votre code Angular. J'ai utilisé curl pour le vérifier.

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 comme 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 mise à jour vers la dernière version de RocketChat J'ai pu utiliser l'API REST mentionnée.

Répondu el 13 de Mai, 2019 par Sibeesh Venu (4473 Points )

Answer 6

0voto

druss Points 31

Vous devriez également vérifier votre JSON (pas dans DevTools, mais sur un backend). Angular HttpClient a du mal à analyser le JSON avec les éléments suivants \0 Les caractères et DevTools l'ignorent, ce qui fait qu'il est assez difficile de le repérer dans Chrome.

Sur la base de cet article

Répondu el 6 de Août, 2019 par druss (31 Points )

Angular HttpClient "Echec de l'analyse syntaxique".

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Angular HttpClient "Echec de l'analyse syntaxique".

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: