Angular 2 Error Httpresponse not found

Asked

Viewed 225 times

0

I am trying to implement a login screen that accesses an api through a server, I need to pass the email and the user password to the api, and it returns me NULL in case of error or a number in case of success (user id).

I am receiving the following message by clicking the Submit button:

HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "Not Found",url: "https://dev.endereco/login/undefined", ok: false, …}

I also receive the following message:

POST https://dev.endereco/login/undefined 404 (Not Found)

Follow important parts of my code:

login.component.html:

<input type="text" required name="email" [(ngModel)]="usuario.email" #nome="ngModel" id="usuario" placeholder="Email">

<input type="password" required name="password" [(ngModel)]="usuario.password" #senha="ngModel" id="senha" placeholder="Senha">

<button type="submit" name="entrar" (click)="fazerLogin(usuario.email, usuario.password)" class="login" id="login-button">Entrar</button>

login.componentts.:

private usuario: Usuario = new Usuario(); //Usuario é meu tipo de dado, foi declarado uma interface que possui o email e o password.

 public idUsuario: any = null;

 public alertaUsuarioIncorreto: boolean = false;

 constructor(private router: Router,
              private authService: AuthService) { }

  fazerLogin(usuario: Usuario): void{
    this.authService.fazerLogin(usuario.email, usuario.password)
      .subscribe(user => this.idUsuario = user);

      if(this.idUsuario != null){ //se for diferente de null faz login
        this.alertaUsuarioIncorreto = false;
        this.router.navigate(['/home'])
      }else{ //caso contrario mostra um toast com msg de erro
        this.alertaUsuarioIncorreto = true;
        var x = document.getElementById("toast")
        x.className = "show";
        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 5000);
      }
    }
}

auth.service.ts:

fazerLogin(email: string, password: string): Observable<Usuario>  {
    return this._http.post<Usuario>(AppSettings.API_ENDPOINT+email,password)
  }

@Edit:

I tried to add a header provided by Angular (?):

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'my-auth-token'
  })
};

passing the header as a function parameter:

 fazerLogin(email: string, password: string): Observable<Usuario>  {
    return this._http.post<Usuario>(AppSettings.API_ENDPOINT+email,password, httpOptions)
      }

Now I get:

: Response for preflight has invalid HTTP status code 404.

HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}
  • Your component function takes only one parameter and you are passing two.

  • Eduardo, the login function receives a type of User data that contains the user name and password. I believe the problem is not this

  • Receiving two parameters is different from receiving an object parameter with two properties. Try (click)="make Login(user)"

1 answer

1


As @Eduardo Vargas mentioned in his comments, login.component.html passes two parameters to the function `fazerLogin, of which it receives only one. We can notice that it is not interpreting the value passed if we analyze the generated url:

https://dev.endereco/login/UNDEFINED

To solve the problem, just pass the complete object as a parameter:

(click)="fazerLogin(usuario)"

In doing so, your component gets the full user, with all the properties.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.