一个奇怪的bug,浏览器POST请求中 undefined 字段被丢弃,是什么导致的?

1,007 阅读2分钟

背景

在一次后台开发中,向后端发送post请求,其中传参为undefined值,会被自动去除。当时第一反应会不会是浏览器的问题,智能过滤掉为undefined的值的字段。后面经过排查,发现是axios的问题。

1. 问题的原因

当使用post请求向后端发送参数时,在浏览器上看到的效果,会将参数中为undefined值的字段去除。

为什么会出现这种现象?

前后端之间的HTTP请求的请求体和响应体其实是以字符串的形式在进行数据交换,这样才能保证双方都能够识别。但是这个字符串也需要满足一定的规范,即必须能够处理成JSON:前端发送请求时使用JSON.stringify将Javascript对象处理成字符串。因为axios的内部使用JSON.stringify参数进行了处理,处理后undefined值的字段丢失了。

2. axios源码

当使用post请求时,会使用stringifySafely进行安全序列化,如果没有传入编码的函数则使用默认的JSON.stringify进行序列化。

image.png

image.png

为什么序列化后会丢失?

因为JSON(JavaScript Object Notation)本身是一种​​数据交换格式​​: ​​简单​​、​​跨语言​​、​​结构化且明确​​。

而 undefined是 JavaScript 特有的一个原始值,它并不属于 JSON 标准数据类型(JSON 标准支持的数据类型包括:string、number、boolean、null、object、array)。

✅ JSON 支持的类型:字符串、数字、布尔值、null、对象、数组

❌ JSON ​​不支持​​:undefined、函数、Symbol、Date(需自行转换)等

所以,当 JavaScript 的 JSON.stringify方法在序列化时遇到 undefined,它选择​​直接忽略该字段​​,而不是抛出错误或者将其转成字符串 "undefined",这是为了保证生成的字符串是​​合法且通用的 JSON 格式​​。

3. 总结

最后总结一下,当使用axios进行post传递参数时,如果参数值为undefined需要进行默认空,否则无法传递到后端。

如有错误,请指正O^O!