Не удается войти в API с ошибкой получения angular 400

#angular #typescript #api #jwt

#angular #typescript #API #jwt

Вопрос:

Обновить:

Я пытаюсь отправить POST-запрос в веб-API, используя http и jwt. Я следовал этому руководству, но я всегда получаю ошибку 400 из запроса.

https://bezkoder.com/angular-10-jwt-auth/

Используя Postman, я получаю статус 201, и я думаю, что проблема в том, что в моем проекте angular он не получает «токен» из API, даже с помощью interceptor..

Изображение входа в систему Postman

Ошибка при входе в систему:

Изображение ошибки входа в систему

Как я могу получить этот токен в свое приложение?

login.page.ts

   async newLogin(email: string, password: string) {
    try {
      return this.authService.loginService(email, password).subscribe(async (res) => {
        console.log(res);
        if (res['token']) {
          localStorage.setItem('token', res['token']);
          console.log(res);
        }
      },
        (err) => {
          console.log(err);
        }
      )
    }
 catch (err) {
      console.log(err.response);
      console.log(email, password);


      const loading = await this.loadingCtrl.create({
        keyboardClose: true,
        message: "Checking credentials ...",
        duration: 3500
      });
      (await loading).present();
      this.isLoading = true;
      setTimeout(async () => {
        (await loading).dismiss();
        this.isLoading = false;
        this.clicked = false;
      }, 2500);

      setTimeout(async () => {
        const error2 = await this.alertCtrl.create({
          header: 'Warning!',
          message: 'Login failed.'   err.message,
          buttons: ['OK']
        });
        await error2.present();
      }, 3000);


    }
}
  

auth-service.ts

 const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

  loginService(email: string, password: string): Observable<any> {
    return this.http.post(`${this._loginAPI}`, { email, password }, httpOptions)

  }
  

auth-interceptor.ts

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    console.log("Interception In Progress"); //SECTION 1
    const token: string = localStorage.getItem('token');

    req = req.clone({ headers: req.headers.set('Authorization', 'Bearer '   token) });
    req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
    req = req.clone({ headers: req.headers.set('Accept', 'application/json') });

    return next.handle(req)
      .pipe(
        catchError((error: HttpErrorResponse) => {
          //401 UNAUTHORIZED - SECTION 2
          if (error amp;amp; error.status === 401) {
            console.log("ERROR 401 UNAUTHORIZED")
          }
          const err = error.error.message || error.statusText;
          return throwError(error);
        })
      );
  }

  

Комментарии:

1. Зачем использовать axios, когда у Angular есть http-клиент?

2. Я пробовал оба решения, но не сработало.. Та же ошибка, но без подсказки

3. И что вы видите в сети браузера при отправке запроса? Какая разница с Postman?

4. Может быть, я думаю, я знаю, в чем проблема. Hint: внимательно посмотрите на регистрационную информацию на изображении, которое вы отправили.

5. Разница, я думаю, в токене, но когда я подключаюсь от postman, у меня есть файлы cookie или токены, просто он выдает mes 201 и мой 400.