Angular 5添加HttpHeaders时触发TypeError异常求助

从你的报错栈和代码来看，这个问题的核心是**HttpHeaders在处理Authorization头时遇到了无效的值**，大概率是this.gs.token为undefined或null导致的。Angular 5的HttpHeaders内部逻辑在遍历头值时，会尝试读取值的length属性，如果值是undefined，就会抛出这个错误。

下面是具体的排查和解决步骤：

1. 先确认token的有效性 #

在创建httpOptions之前，先打印token的值，确认它是否是有效的字符串：

list(): Observable<ResList> {
  const url = this.gs.backendServer + this.gs.backend.endpoints.list;
  // 新增这行，检查token状态
  console.log('当前token值:', this.gs.token); 
  const httpOptions = {
    headers: new HttpHeaders({
      'Authorization': this.gs.token
    })
  };
  // ... 后续代码
}

如果打印结果是undefined或null，那就是问题的根源：

• 检查GlobalService中的token是否在调用list()方法前已经被正确赋值（比如登录接口返回后是否把token存入了gs.token）；
• 如果是未登录状态下调用list()，此时token自然不存在，这种场景下应该跳过Authorization头的设置。

2. 安全构建HttpHeaders #

避免直接在HttpHeaders构造函数中传入可能包含undefined的对象，改用更安全的方式构建headers：

方式一：判断token存在后再添加 #

list(): Observable<ResList> {
  const url = this.gs.backendServer + this.gs.backend.endpoints.list;
  let headers = new HttpHeaders();
  // 仅当token存在时才添加Authorization头
  if (this.gs.token) {
    headers = headers.append('Authorization', this.gs.token);
  }
  const httpOptions = { headers };

  return this.http.get(url, httpOptions)
    .map(res => <ResList> res)
    .do(dataReceived => console.log(dataReceived));
}

方式二：给token设置默认空字符串 #

如果后端能接受空的Authorization头，也可以直接给token加默认值：

const httpOptions = {
  headers: new HttpHeaders({
    'Authorization': this.gs.token || ''
  })
};

3. 验证请求触发时机 #

确保调用list()方法时，用户已经完成登录流程。比如在组件中，应该先检查GlobalService的token是否存在，再调用list()：

// 组件中的调用逻辑
if (this.globalService.token) {
  this.myService.list().subscribe(...);
} else {
  // 引导用户登录，或者处理未登录状态
}

这个问题是Angular 5版本中HttpHeaders的一个常见坑，后续Angular版本已经修复了对undefined值的处理，但在Angular 5中需要手动处理这种边界情况。

内容的提问来源于stack exchange，提问作者Marco Jr