1

Buenas, soy nuevo con angular 2 y estoy haciendo la parte de inicio de sesión de una aplicación web y al hacer el llamado http post con el usuario y contraseña me devuelve el error:

400 (MALA petición).

Lo codifique según lo vi en internet y no puedo encontrar el error. Ademas lo pruebo en POSTMAN y funciona correctamente.

El llamado es el siguiente:

    login(username, password){
      let client_id = "xxxxxxxxxx";
      let client_secret = "xxxxxxxxx";
      let grant_type ="password";        

      return this._http.post(url, {
      username, password, grant_type,client_id, client_secret
      } ).map(res =>{
        res.json()
    }); 
}

2 respuestas 2

1

El principal problema es la falta de cabecera y su clave-valor Content-type.

En este caso la petición es de tipo POST y se necesita enviar el objeto JSON como parte del body de la petición http. El header mínimo sería el siguiente (inicializado con código Angular).

 headers: Headers = new Headers();
 this.headers.append('Content-Type', 'application/json');

Este header puede ser inicializado de manera global si va a ser utilizado en un Service de Angular para varias peticiones, o antes de cada petición en caso de ser específicas. El método para tu login podría implementarse de la siguiente manera:

  login(username, password) {
     return this.http.post(url,
        {
          username, password, grant_type, client_id, client_secret
        }, 
        { headers: this.headers }
     ).map(res => { res.json() }); 

Ten en cuenta que puede que en alguna petición de este tipo la información vaya completamente contenida en variables clave valor del header, en cuyo caso deberías añadir a tu header algo similar a esto:

this.headers.append('username', 'XXXXXXXX');
this.headers.append('password', 'XXXXXXXX');
this.headers.append('grant_type', 'password');
this.headers.append('client_id', 'XXXXXXXX');
this.headers.append('client_secret', 'XXXXXXXX');

Te recomiendo que utilices las peticiones http con el siguiente formato para mejorar la limpieza y eficiencia del código (ejemplo de petición POST):

   /**
   * POST - publicar/enviar un objecto JSON
   * @param url 
   * @param object
   */
  post(url: string, object): Observable<any> {
     return this.http.post(url, 
        JSON.stringify(object), { headers: this.headers })
        .map(this.extractData)
        .catch(this.handleError);
  }

  /* Util http methods */
  private extractData(res: Response): Observable<any> {
    return res.json() || { };
  }

  private handleError(error: any){
    return Observable.throw("Error: Petición errónea");
  }
1

Si en postman funciona ve que tipo de petición haces:

POSTMAN REQUEST

No incluyes muchos detalles de tu back, pero, debe hacer que tu back reciba peticiones del tipo que le haces desde el angular o en angular hacer la petición correcta que tu back recibe.

Para que tengas una mejor idea de que envías desde postman ve a "code" y observa como hace la petición:

code in postman

Request type

Una vez que sepas que tipo de petición estas haciendo en la documentación de angular puede buscar como hacer un POST o GET y establecer las opciones en las cabeceras para enviar un "Content_Type" correcto.

Saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.