réponse HTTP angulaire $ SyntaxError: jeton inattendu E

Question

Faire un simple appel POST en utilisant angulaire service HTTP $: authService.login = function (nom d'utilisateur, mot de passe) { var credentials = 'username =' + nom d'utilisateur + '&' + 'mot de passe =' + mot de passe;

 return $http({ 
      method: 'POST', 
      url: href, 
      headers: {'accept': acceptValue, 'content-type': contentType}, 
      data: credentials 
     }).then(onSuccess, onError); 
    }; 

Impossible d'obtenir le statut d'erreur, au lieu que je reçois SyntaxError: jeton inattendu E. la console d'abord afficher l'état 401 et immédiatement après l'erreur d'analyse syntaxique. je me demande ce qu'il fait sous le capot, qu'est-ce qu'il essaie d'analyser, et pourquoi je ne suis pas capable de faire fonctionner error.status.

Answer 1

Le problème peut provenir de la façon dont vous numérotez vos données. Plutôt que de construire vous-même la chaîne, vous pouvez essayer de les passer directement dans data comme un objet:

data: {username: username, password: password} 

angulaire doit sérialiser les informations dans l'objet de données par lui-même.

Si cela ne fonctionne pas, Angular a également une alternative intégrée à son sérialiseur par défaut qui imite celui trouvé dans jQuery. Les documents à ce sujet sont here. Votre demande avec cette méthode ressemblerait à quelque chose comme: Si vous allez avec cette option

  $http({ 
       url: "/auth/login", 
       method: "POST", 
       headers: {"Content-Type": "application/x-www-form-urlencoded"}, 
       data: $httpParamSerializerJQLike({ 
        email: email, 
        password: password 
       }) 
      }) 

, ne pas oublier d'injecter $httpParamSerializerJQLike comme une dépendance.

Answer 2

Il semble que votre demande soit correctement envoyée et que vous receviez la réponse.

J'ai fait un essai avec un service RESTful qui renvoie un code d'état 401. Voici mon code JavaScript:

var href = 'https://contactsapi.apispark.net/v1/contacts/'; 
var acceptValue = 'application/json'; 
var contentType = 'application/json'; 
var credentials = {}; //'something'; 

function onSuccess(data, status, headers, config) { 

} 

function onError(data, status, headers, config) { 
    console.log('data = '+JSON.stringify(response, null, 2)); 
} 

$http({ 
    method: 'POST', 
    url: href, 
    headers: {'accept': acceptValue, 'content-type': contentType}, 
    data: credentials 
    }).then(onSuccess, onError); 

L'objet de réponse contient dans mon cas ce qui suit:

{ 
    "data": { 
    "code": 401, 
    "contactEmail": null, 
    "description": "The request requires user authentication", 
    "homeRef": "/", 
    "reasonPhrase": "Unauthorized", 
    "uri": "http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.4.2" 
    }, 
    "status": 401, 
    "config": { 
    "method": "POST", 
    "transformRequest": [ 
     null 
    ], 
    "transformResponse": [ 
     null 
    ], 
    "url": "http://localhost:8182/contacts/", 
    "headers": { 
     "accept": "application/json", 
     "content-type": "application/json" 
    }, 
    "data": {} 
    }, 
    "statusText": "Unauthorized" 
} 

Ce qui pourrait vous aider est d'avoir un regard sur le contenu de la réponse (en-têtes/charge utile). Par exemple, si la charge utile est une charge JSON, la valeur de l'en-tête Content-Type. Il y a peut-être un écart entre le Content-Type de la réponse et le contenu réel. Par exemple, vous avez reçu du contenu en texte brut avec la valeur de type de contenu application/json.

J'ai fait un test pour simuler ce cas (de contenu XML avec un type de contenu application/json) et je l'erreur suivante:

SyntaxError: Unexpected token < 
    at Object.parse (native) 
    at vc (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:15:480) 
    at Zb (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:82:229) 
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:83:143 
    at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:7:322) 
    at dd (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:83:125) 
    at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:84:380) 
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:119:113 
    at n.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:133:221) 
    at n.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:130:233) 

tente angulaire pour analyser le contenu JSON mais comme il est malformé, il ne peut pas et jette une erreur.

Il semble être similaire à votre erreur. Je pense donc que le problème n'est pas dans votre application angulaire mais dans le serveur ...

espérons qu'il vous aidera, Thierry