Angular4 - Http error retourné est une chaîne au lieu d'un objet

Question

Je fais une demande Http en Angular 4 en utilisant sa classe HttpClient intégrée. Tout fonctionne bien, mais il y a un petit problème avec la variable d'erreur retournée.

Quand je post la mauvaise combinaison nom d'utilisateur/mot de passe pour se connecter à l'utilisateur, l'objet d'erreur retourné contient une error clé dont la valeur devrait être un Object mais je suis obtenir un string à la place. S'il vous plaît voir ci-dessous le texte entre ** dans l'objet de comprendre ce qui est de la question:

{**error: "{"non_field_errors":["Unable to login with provided credentials."]}"**, headers: Object, status: 400, statusText: "Bad Request", url: "http://mymedicine.loc/api/auth/login/", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://project.loc/api/auth/login/: 400 Bad Request"} 

Ce qui pourrait causer ce genre de problème? J'ai besoin d'avoir un objet là juste pour que je puisse informer l'utilisateur de ce qui s'est passé pendant l'authentification. Je dois préciser que l'authentification fonctionne bien lorsque les informations d'identification correctes sont fournies et que j'ai activé CORS sur le serveur Web auquel j'envoie la demande HTTP.

Voici un petit morceau de code extrait qui fait la demande POST http:

interface ErrorMessage { 
    username: string[1]; 
    password: string[1]; 
    non_field_errors: string[1]; 
} 

interface ErrorResponse { 
    error: ErrorMessage; 
} 

// get token from the server 
this.http.post<TokenResponse>('http://myproject.loc/api/auth/login/', body).subscribe(
    (res: TokenResponse) => { 
     // login with token 
     this.auth.login(res.auth_token); 

     // redirect 
     this.router.navigateByUrl('/url'); 
    }, 
    (err: ErrorResponse) => { 
     let error = err.error; 
     console.dir(err); 
    } 
); 

Answer 1

Cette erreur semble avoir été corrigée par les versions récentes de Angular et Angular-cli selon source, et je ne l'ai pas avec Angular 4.4.6.

Answer 2

Essayez de régler Content-Type à JSON dans les en-têtes de votre demande de poste pour le serveur

const headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8'); 

return this.http.post<TokenResponse>('/api/auth/login/', body, {headers: headers}) 
      .map(res => { 
       return {token: res.auth_token}; 
      }).catch((error: HttpErrorResponse) => { 
       if (err.error) { 
        console.log(err.error); 
       } 
       return _throw(err); 
     });