Angular对象携带未知属性触发后端UnrecognizedPropertyException排查

排查步骤 #

• 第一步：定位属性添加的具体节点
  在对象初始化、业务赋值、提交请求三个关键节点加断点，每个断点执行console.log(yourItemObj.hasOwnProperty('otherUnknownProperty'))判断属性是否存在，快速缩小范围。要注意TypeScript的类型声明仅用于编译期校验，运行时不会自动剥离额外属性，不要认为标注了ItemEto类型的对象就一定符合定义。
• 第二步：排查全局请求拦截逻辑
  检查Angular项目中注册的HTTP拦截器，是否有统一给请求体附加属性、或者专门处理ETO类序列化的逻辑。如果全局搜索属性名无结果，大概率属性名是动态拼接的（比如通过变量、配置表动态生成key），直接搜固定字符串无法匹配。
• 第三步：排查原型链污染
  断点时打印Object.getPrototypeOf(yourItemObj)，检查ItemEto、父类AbstractEto的原型是否被挂载了额外属性，也可以打印Object.prototype确认是否有全局Object原型被第三方库/公共代码修改的情况。
• 第四步：排查对象来源
  确认你的ItemEto实例是否是直接复用了旧接口的返回值：如果实例是从历史接口返回的JSON直接赋值来的，即使后续删除了类定义里的属性，旧接口返回的属性也会保留在对象里，不会被自动清除。
• 第五步：确认属性来源端
  通过Chrome网络面板抓取真实请求的payload，排除控制台打印的引用延迟更新干扰，同时确认是否是网关、反向代理层在请求转发时附加了额外属性。

临时规避方案 #

如果急需解决问题，可以在提交请求前手动构造干净的对象：

// 仅保留定义内的属性
const cleanPayload: ItemEto = {
  id: originItem.id,
  modificationCounter: originItem.modificationCounter,
  item1: originItem.item1,
  item2: originItem.item2
};
// 用cleanPayload发起请求

另外如果项目依赖了内部公共类库，也可以检查公共库是否没有发布最新版本，npm安装的仍为带旧属性定义的版本。

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