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, …}
angular typescript httpclient

  • 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 angular typescript httpclient

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