Angular中HttpClient GET检查网络连通性时报TypeError错误

这个错误是Angular的HttpHeaders在初始化阶段抛出的异常，导致请求还未发送就失败，根源是请求头配置中存在undefined的键或值，触发了内部读取length属性时的报错。

排查与修复步骤 #

1. 检查全局HTTP拦截器
   如果项目中实现了HttpInterceptor，重点排查拦截器里设置请求头的代码，是否存在往headers中传入undefined值的情况：

// 错误示例：token为undefined时仍尝试设置Authorization头
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const authToken = undefined;
  const modifiedReq = req.clone({
    headers: req.headers.set('Authorization', `Bearer ${authToken}`)
  });
  return next.handle(modifiedReq);
}

修复方式：添加非空判断，避免传入无效值：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  let modifiedReq = req;
  const authToken = getAuthToken(); // 替换为你的token获取逻辑
  if (authToken) {
    modifiedReq = req.clone({
      headers: req.headers.set('Authorization', `Bearer ${authToken}`)
    });
  }
  return next.handle(modifiedReq);
}

2. 检查HttpClient全局默认配置
   查看AppModule或核心模块中，是否为HttpClientModule配置了默认headers，若存在值为undefined的配置项，会引发同样问题：

// 错误示例：默认headers包含undefined值
providers: [
  {
    provide: HTTP_HEADERS,
    useValue: new HttpHeaders({
      'X-Custom-Header': undefined
    })
  }
]

修复：移除或修正undefined的header配置。

3. 临时验证方案
   可以在当前请求中显式传入空headers，验证是否是全局配置导致的问题：

this.#http.get<any>(url, { headers: new HttpHeaders() }).pipe(
  // 原有pipe逻辑
)

如果此方式能正常发起请求，说明全局headers配置存在问题，回到前两步继续排查。

内容的提问来源于stack exchange，提问作者Rob Mousley