javascript - 在这种情况下，为什么 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 请求

Preflighted requests

Unlike simple requests (discussed above), "preflighted" requests first send an HTTP OPTIONS request header to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests are preflighted like this since they may have implications to user data. In particular, a request is preflighted if:

It uses methods other than GET or POST. Also, if POST is used to send request data with a Content-Type other than application/x-www-form-urlencoded, multipart/form-data, or text/plain, e.g. if the POST request sends an XML payload to the server using application/xml or text/xml, then the request is preflighted. It sets custom headers in the request (e.g. the request uses a header such as X-PINGOTHER)