为什么 Angular HTTPClient 在这种情况下重复其余调用两次？

Question

我有一个使用 Rest API 的 Angular 服务，但是当我检查网络和后端时，我发现 API 每次都调用了两次：

这是我的服务代码：

getAllUsers():Observable<any>{
    return this.http.get(this.mainConfigService.getUsersUrl()).pipe(
        map(this.extractData));
}

private extractData(res: Response) {
        let body = res;
        return body || { };
}

在我的组件中，我调用了这个服务：

  getAllUser(){
    let users : User[] = [];
    this.userService.getAllUsers().subscribe(data=>{
      this.usersList=data;
      data.forEach( (element) => {
        users.push(
               {
                fullName: element.fullName,
                firstName:element.firstName,
                lastName:element.lastName,
                mail:element.mail,
                idNumber:element.idNumber,
                accountExpiresDateTime:element.accountExpiresDateTime,
                role:element.role
             }
             );
      });
      this.dataSource = new MatTableDataSource(users);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    },err=>{
      this.handleError(err)
    })
  }

在控制台中，我看到 API 调用了两次，即使我调用 getAllUser() 的唯一地方是在 Init 方法中

我仍然无法找到这个问题的原因

Answer 1

这可能是一个 OPTIONS 请求

预检请求

与简单请求（上面讨论过）不同，“预检”请求首先向其他域上的资源发送 HTTP OPTIONS 请求标头，以确定实际请求是否可以安全发送。跨站点请求是这样预检的，因为它们可能会对用户数据产生影响。特别是，在以下情况下对请求进行预检：

它使用 GET 或 POST 以外的方法。此外，如果 POST 用于发送内容类型不是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 的请求数据，例如，如果 POST 请求向服务器发送 XML 负载使用 application/xml 或 text/xml，然后预检请求。它在请求中设置自定义标头（例如，请求使用 X-PINGOTHER 等标头）