Angular12 HttpClient.Post提交Date参数格式错误返回400问题咨询

直接触发400错误的原因 #

后端.NET接口默认使用System.Text.Json做请求体反序列化时，System.DateTime类型仅支持解析符合ISO 8601规范的日期字符串（标准格式为yyyy-MM-ddTHH:mm:ss.fffZ）。你抓包看到的birthDate: "Sun Jun 12 2022"是本地时区的可读性格式，缺失时间、时区标识，不符合反序列化格式要求，因此触发校验错误返回400状态码。

日期格式序列化异常的原因 #

Angular的HttpClient在发送Content-Type: application/json的请求时，会默认调用内置JSON.stringify()对请求体做序列化处理。原生JavaScript的Date对象被JSON.stringify()序列化时，默认会调用自身的toJSON()方法，正常输出应为ISO 8601格式字符串，你当前拿到非标准格式输出，是因为Date对象的默认序列化逻辑被改动，常见场景包括：

• 项目中引入的第三方依赖、兼容旧环境的polyfill重写了Date.prototype.toJSON方法，将返回值替换为Date.prototype.toString()的输出结果——你看到的"Sun Jun 12 2022"正是toString()方法的典型返回格式
• 自定义的patientDetails类本身实现了toJSON()方法，或者类上挂载的序列化相关装饰器（比如class-transformer、Angular响应式表单的类型转换装饰器）修改了Date类型属性的序列化规则，没有调用toISOString()生成标准格式
• 全局配置的Http拦截器提前对请求体做了序列化处理，逻辑存在缺陷，将Date对象强制转换为了普通字符串而非标准ISO格式

• 打开浏览器控制台执行console.log(JSON.stringify({test: new Date()}))，如果输出的test字段不是ISO格式，说明全局Date原型的序列化方法被第三方代码修改
• 如果上述输出为正常ISO格式，可实例化patientDetails对象并给birthDate赋值后，执行console.log(JSON.stringify(patientDetails))查看输出，即可确认是否为类本身的序列化逻辑存在问题

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