后端ID传到前端时被截断，末尾变成000的解决方法

已于 2024-12-15 13:31:52 修改
阅读量2.6k 收藏 3
点赞数 1
分类专栏： Javascript 文章标签： 前端
于 2022-06-17 17:31:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014165391/article/details/125337500
版权

一、问题原因

后端传过来的id有18位，后端数据库存储的值是744597068957356012，并且在代码里面抓了日志；打印的结果都是744597068957356012；但是在前台chrome浏览器network看到始终是744597068957356000；最后怀疑是浏览器做了截断，于是带着这个想法在网上找了一些资料；

二、解决方案

最终找到的是Javascript最大安全数导致的限制，所以后端直接把int改成string类型就解决嘞问题；原理的话可以参考下面链接，

为什么JavaScript最大安全整数是2^53-1 - 掘金

解决前后端因js导致Long值精度丢失问题
weixin_54641589的博客
07-17 384
解决前后端因js导致Long值精度丢失问题
前端知识宝典
qq_37759901的博客
01-29 1434
搜索框输入，文本剪辑器实时保存代码实现思路如下：（利用定时器，每次触发先清掉以前的定时器，从新开始）
解决后端ID传到前端时被截断，末尾显示00
丢丢的博客
05-08 837
解决后端ID传到前端时被截断，末尾显示00解决办法
雪花算法生成ID返回到前端出错问题解决
最新发布
m0_72776581的博客
02-24 343
生成 Long 类型的主键 ID，在将数据返回前端后，会出现后三位精度丢失的问题。JavaScript 使用 IEEE 754 标准来表示数字，其安全整数范围是 [−253+1,253−1][−253+1,253−1]，即 [−9007199254740991,9007199254740991][−9007199254740991,9007199254740991]。超出这个范围的整数可能会失去精度，导致数值出现小幅度加减。在已有的对日期数据进行处理的代码上，只需加入一行。
后端返回的id到前端后 后面几位数全部变成0了 问题解决
weixin_45966674的博客
09-13 2154
因为个人经历不完整导致的 而且这个问题 所以 我觉得我们既然弄出了这个问题 还是由我们自己填上比较好。前端使用number类型进行接收，number类型的范围小于后台Long类型的范围，出现了精度丢失问题。但我个人建议还是后端去处理 因为你要想 这个问题本身就是因为你后端不够成熟。简单说 number 类型 接不了那么大的数值 后面的值直接被四舍五入了。这个问题比较经典的叫法是 雪花算法生成的ID过长，前端接收精度丢失。long到了前端转数字类型 有大小限制 但 字符串没有呀。
vue开发之----后端过来的数据丢失精度问题后几位00
山鬼谣弋痕夕的博客
06-16 4039
后端过来的数据丢失精度问题后几位00？怎么就不一样了呢？
后端传递前端Long值id 数据不一致
qq_40603125的博客
03-01 531
前端展示一个id字段，使用此id字段查询另外一个表的数据，但是。
后端返回Long类型数字过大失去精度，尾数0000问题
u010014465的博客
11-09 1099
排查一个小问题：前端在接收后端返回字段时，如果为Long类型，且数值过大时容易失去精度。问题：仅在超过一定大小的数字才自动转换。
前端面试题--js
weixin_44501366的博客
10-09 5410
SetES6 新增的一种新的的数据结构，类似于数组，但成员是唯一且无序的，没有重复的值。成员不能重复；只有键值，没有键名，有点类似数组；可以遍历，方法有add: 新增，相当于array里的pushdelete: 存在即删除集合中的valuehas: 判断集合中是否存在valueclear: 清空集合Set 结构可以利用Array.from或者 扩展运算符 转化为数组。
前端面试题总结
jing_jing95的博客
05-24 1176
1.GET 和 POST 到底有什么区别？ - 大宽宽的回答 - 知乎 1.1 场景一：浏览器使用的GET/POST 浏览器中非AJAX的HTTP请求，HTTP协议中的GET/POST 浏览器用GET请求来获取一个html页面/图片/css/js等资源；用POST来提交一个<form>表单，并得到一个结果的网页 1.1.1 GET “读取“一个资源，反复读取不应该对访问的数据有副作用 [没有副作用被称为“幂等“（Idempotent)] 可以对GET请求的数据做缓存： 缓存可以做到
渗透测试 2 --- XSS、CSRF、文件上传、文件包含、反序列化漏洞
墨鱼菜鸡
07-11 3483
1、渗透测试 实用 浏览器插件 chrome、edge 插件：搜索 cookie，安装 cookie editor，打开插件，可以 导出 cookie HackBar ：Hackbar是网络安全学习者常备的工具 (https://www.fujieace.com/hacker/tools/hackbar.html )。 ​解决Firefox插件-H...
红队专题-漏洞挖掘-代码审计-CSRF/SSRF/Xss
aming小老弟
03-11 1058
其中 Web A 为存在 CSRF 漏洞的网站，Web B 为攻击者构建的恶意网站，User C 为 Web A 网站的合法用户。用户 C 打开浏览器，访问受信任网站 A，输入用户名和密码请求登录网站A在用户信息通过验证后，网站 A 产生 Cookie 信息并返回给浏览器，此时用户登录网站 A 成功，可以正常发送请求到网站A用户未退出网站 A 之前，在同一浏览器中，打开一个 TAB 页访问网站 B网站 B 接收到用户请求后，返回一些攻击性代码，并发出一个请求要求访问第三方站点 A。
后端id设置long类型时，传到前端，超过19位最后两位为00
浩星
06-22 6392
后台传入的雪花id在前端被截断,id超过19位最后两位为00
axios解决后端传来的id太长导致精度丢失（超过16位的数字会变成0000）的问题
qq_68155756的博客
05-11 2124
办法一：让后端把id传成字符串类型； 办法二：用jsonBig转换为bigInt数字类型： 1.在项目根目录打开命令行输入命令安装jsonBig插件： 2.在封装的请求中使用插件，核心是在创建sxios实例的时候假如transformResponse这个配置项，可以拦截接口返回的内容进行处理(因为默认会使用JSON.parse()解析从后端的来的数据)，再用json-bigint插件把长类型数字解析成字符串，解析失败就代表没有长数字可解析，使用JSON.parse()解析
id传输到前台时自动加了两个0
qq_27387133的博客
07-09 836
后台打印的时候，id是没问题的，但是返回到前端之后，id会自动增加了“00”，检查过代码是没有问题的。 如后台打印出来的id是"1410155294154342401",前台js返回的id变成了"141015529415434240100"。 一顿检查之后，发现是同事在数据库的id字段勾选了“无符号”所导致的： ...
解决 前端显示后端返回的null值为 1的问题
请告诉他
07-20 1176
【代码】解决 前端显示后端返回的null值为 1的问题。
前端获取后端16位主键id，后3位四舍五入
weixin_43881599的博客
03-10 1194
前端获取后端16位主键id，后3位四舍五入 项目开发中，前端获取到数据中的16位主键id后，后3位自动四舍五入。排除后发现问题。 https://www.zhihu.com/question/36680964 有说明。 原因的是后端数据是BigDecimal类型，传到前端导致四舍五入id不准备。后端将参数类型转成String传输就可以。 ...
前端返回数据类型Long时,精度丢失,最后两位显示为0
weixin_56153386的博客
07-20 4110
解决数据类型Long时,返回前端精度丢失,最后两位显示为0
vue2 前端传json串给后端。后端接收到的不是json串
09-21
在 Vue.js 的前端开发中，当你需要将数据作为 JSON 字符串发送到后端服务器时，通常会通过 Axios 或其他 HTTP 客户端库来进行请求。如果你遇到后端反馈接收到的数据不是 JSON 格式，这可能是以下几个原因： 1. **Content-Type 配置错误**：检查前端的 `Content-Type` 头部是否设置为 "application/json"，这是告诉后端接收的数据是 JSON 格式的。 ```javascript axios.post('/api/endpoint', data, { headers: {'Content-Type': 'application/json'} }) ``` 2. **后端解析问题**：确认后端服务器是否配置了正确的 Content-Type 类型来处理来自前端的 JSON 数据。如果后端使用的是默认的文本解析，可能会导致无法解析 JSON。 3. **数据格式异常**：前端传递的数据格式可能存在错误，例如字符串没有正确地转换为 JSON 对象。确保在发送前使用 `JSON.stringify()` 将 JavaScript 对象转为字符串。 4. **网络问题**：有时候传输过程中数据可能会被截断或损坏，导致后端无法识别。检查网络连接是否正常。 5. **API 接口设计问题**：确认 API 接口的文档说明是否明确指出了期望的输入格式，可能需要调整前端编码或后端验证。 若遇到此类问题，建议查看浏览器的开发者工具网络请求部分，查看响应头和内容，以及后端的日志信息，以便定位问题所在。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值