Angular Can'；t登录API时出错400

更新：

我正在尝试使用http和jwt向web API发送POST请求。我遵循了这个教程，但我总是从请求中得到错误400

使用Postman，我得到状态201，我认为问题在于，在我的angular项目中，它没有从api获得“令牌”，即使使用拦截器

登录时出错：

我如何将此代币输入我的应用程序

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);


    }
}

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)

  }

 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 && error.status === 401) {
            console.log("ERROR 401 UNAUTHORIZED")
          }
          const err = error.error.message || error.statusText;
          return throwError(error);
        })
      );
  }

验证服务.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);


    }
}

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)

  }

 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 && error.status === 401) {
            console.log("ERROR 401 UNAUTHORIZED")
          }
          const err = error.error.message || error.statusText;
          return throwError(error);
        })
      );
  }

const httpOptions={
标题：新的HttpHeaders（{'Content-Type'：'application/json'}）
};
登录服务（电子邮件：字符串，密码：字符串）：可观察{
返回this.http.post（`this.\u loginAPI}`、{email、password}、httpOptions）
}

auth interceptor.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);


    }
}

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)

  }

 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 && error.status === 401) {
            console.log("ERROR 401 UNAUTHORIZED")
          }
          const err = error.error.message || error.statusText;
          return throwError(error);
        })
      );
  }

intercept（请求：HttpRequest，下一步：HttpHandler）{
log（“正在进行的拦截”）；//第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'））}）；
返回下一个句柄（req）
.烟斗(
catchError（（错误：HttpErrorResponse）=>{
//401-第2节
if（error&&error.status==401）{
console.log（“错误401”）
}
const err=error.error.message | | error.statusText；
返回投掷器（错误）；
})
);
}

当Angular有http客户端时，为什么要使用axios？我尝试了这两种解决方案，但都不起作用。。同样的错误，但并没有任何线索。当你们发送请求时，你们能在浏览器的网络中看到什么？邮递员有什么不同？也许，我想，我知道什么问题<代码>提示：仔细查看您发送的图像上的登录信息。不同之处在于我猜是令牌，但当我从邮递员那里连接时，我有cookie或令牌，很简单，它会给出mes 201和我的400。