问题出在JS解析环节:后端返回≥16位Long型数字时,JSON.parse()将其转为Number类型导致精度丢失,因JS安全整数上限为9007199254740991,超出后末位被抹零或进位。
直接看后端返回的原始 json 响应体,和前端控制台打印出的解析后值是否一致——不一致,问题就出在 js 解析环节。
查原始响应:确认后端发出去的是不是对的
打开浏览器开发者工具的 Network 面板,找到对应接口请求,点开 Response 标签页。重点观察 Long 字段(如 id、orderId、userId)是否以纯数字形式存在,比如:
"id": 2046391557979938817
而不是字符串:
"id": "2046391557979938817"
如果 Response 里是数字且位数 ≥ 16 位(尤其 > 9007199254740991),那基本可以断定:后端没做防护,JS 解析时已悄悄失真。
比对 JS 解析结果:定位丢失发生节点
在控制台执行以下两步验证:
- 复制 Response 中的完整 JSON 字符串,用 JSON.parse() 手动解析一次,再取字段值输出:
console.log(JSON.parse('{"id":2046391557979938817}').id); - 对比你项目中实际使用的数据(如 Axios 成功回调里的 res.data.id 或 Vuex/Pinia 存储后的值)
若两者数值不同(例如 2046391557979938817 → 2046391557979938800),说明精度丢失发生在 JSON 解析阶段,与框架无关,是 JS 语言层限制。
检查传输链路中间件:排除意外转换
有些项目会引入日志拦截器、Mock 工具、代理层或 API 网关,它们可能在转发前做了 JSON 重序列化或字段类型强转。排查点包括:
- Axios 的 transformResponse 配置是否误将数字转成 Number
- Mock 服务(如 Mock.js)是否用了 @integer 规则生成了超安全范围的“假 Long”
- Nginx / Spring Cloud Gateway 是否启用了 JSON body 修改逻辑
- 前端状态管理中是否对 payload 做了 JSON.stringify + JSON.parse 二次处理
验证是否真超出安全整数范围
不必死记 9007199254740991,用代码快速判断:
- 在控制台输入:
console.log(2046391557979938817 > Number.MAX_SAFE_INTEGER);→ 输出 true 即确认越界 - 再试:
console.log(2046391557979938817 === 2046391557979938817 + 1);→ 若返回 true,就是典型精度坍塌
只要后端 ID 来自雪花算法、TiDB AUTO_RANDOM、MySQL BIGINT 自增(尤其高位非零),基本都踩在这个坑里。










