Angular HttpClient调用API报reading 'join'属性未定义错误

这个报错和你写的ApiService封装逻辑无关，核心是全局原型污染：当前项目里一定存在全局代码或者引入的第三方依赖，给Object/Array原型链添加了可枚举的自定义属性或方法，且没有设置enumerable: false。

Angular的HttpHeaders遍历内部存储的头信息时，会把原型链上这些额外注入的可枚举属性也当成合法header项读取，这些注入项根本没有对应的values数组（值为undefined），执行values.join(',')时就会抛出你看到的错误。
相同逻辑在其他项目正常运行，就是因为两个项目的全局依赖、polyfill配置或者全局执行代码存在差异。

打开项目的main.ts，在所有import语句的最顶部加两行调试代码：

console.log('Array原型可枚举属性：', Object.keys(Array.prototype));
console.log('Object原型可枚举属性：', Object.keys(Object.prototype));

正常环境下这两个输出都应该是空数组，如果输出里出现了自定义方法名（比如remove、unique、format这类工具函数名），就能确认是原型污染问题。

• 找到给原型添加方法的业务代码，修改定义方式，将自定义方法设置为不可枚举，参考示例：

  // 错误写法：默认enumerable为true，会被遍历逻辑读到
  Array.prototype.unique = function() {
    return [...new Set(this)]
  }
  
  // 正确写法
  Object.defineProperty(Array.prototype, 'unique', {
    value: function() {
      return [...new Set(this)]
    },
    enumerable: false, // 关键配置，不会被遍历逻辑识别
    writable: true,
    configurable: true
  })
  

• 如果是第三方依赖注入的污染属性，优先升级/替换对应依赖，也可以在引入该依赖后手动删除原型上的可枚举自定义属性。
• 额外检查：确认项目中zone.js的大版本和当前使用的Angular版本完全匹配，版本不兼容的zone.js也可能触发HttpHeaders遍历异常，重新安装对应版本的zone.js即可修复这类场景问题。

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