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

【问题标题】：Why Angular HTTPClient repeat the rest call twice in this case?在这种情况下，为什么 Angular HTTPClient 重复其余调用两次？
【发布时间】：2023-03-18 19:07:02
【问题描述】：

我有一个使用 Rest API 的角度服务，但是当我检查网络和后端时，我看到 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 方法中

我还是找不到这个问题的原因

【问题讨论】：

你能提供一个网络选项卡的屏幕，也许是在请求之前配置客户端和服务器的OPTIONS方法？
是的，这是一种选择方法，谢谢！
第一个请求必须是 OPTION。第二个是真正的 HTTP 调用。请访问developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS

标签： javascript angular rxjs httpclient

【解决方案1】：

这可能是一个 OPTIONS 请求

预检请求

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

它使用 GET 或 POST 以外的方法。此外，如果 POST 用于发送 Content-Type 不是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 的请求数据，例如如果 POST 请求使用 application/xml 或 text/xml 将 XML 有效负载发送到服务器，则预检请求。它在请求中设置自定义标头（例如，请求使用诸如 X-PINGOTHER 之类的标头）

【讨论】：

它是否对页面速度有任何影响，例如 API 调用两次，所以我想了解它是否会减慢速度或任何负面影响，如果是，我们如何避免它。我使用 Angular 作为前端，使用 laravel 作为后端。还使用拦截器。谢谢！
不，您无法避免 OPTIONS 请求，您可以忽略它们，因为每个请求都非常小。

【解决方案2】：

如果您使用HttpInterceptor，也许就是这样。在某些情况下，这使得。

【讨论】：