js处理java后端接口返回long值解析不准确的问题-springboot

最新推荐文章于 2025-02-26 11:43:56 发布
原创 最新推荐文章于 2025-02-26 11:43:56 发布 · 1.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#java #spring

在前端JavaScript中，当处理超过17位的Long型数值时会出现精度丢失，导致与后端Java接口交互时数据不匹配。为了解决这个问题，前端应当以字符串形式传递Long值，如'16437976441985843999'，而SpringBoot后端可以使用JacksonJson确保正确接收和解析Long类型，从而避免精度错误。

js处理java后端接口返回long值解析不准确的问题

在工作中，遇到一个问题，明明后端接口返回的id是16437976441985843999（只是举例），但是用这个id去查询详情接口时总是报错，后端开发人员查了日志是传的id不对，实际是16437976441985843000，浏览器接口返回的id和后端原本给的id竟然不一致，查了相关文档：

在Long长度大于17位时，就会出现精度丢失的问题

简单解释就是：JS自身Number类型的设计原因，原生JS不完全支持long

解决方法

前端请求后端的接口时候，Long值 以字符请求 “16437976441985843999” ，，

springboot :后端接口： 以Long 类型接收。
springBoot jacksonJson 可以确保接收到正确的
Long ：16437976441985843999

Springboot Long类型数据太长返回给前端，精度丢失问题 复现、解决
默默不代表沉默
03-22 5144
Springboot Long类型数据太长返回给前端，精度丢失问题 复现、解决
个人博客-SpringBoot+Vue3项目实战（5）后端封装统一标准化的返回结果以及错误码
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
05-04 862
在实际开发中，前后端分离是常态，通常前后端通过标准化的JSON来交换数据。前端根据接口定义，以等方式访问后端接口，后端可以通过注解解析参数，Rest风格的传参方式可以使用注解解析参数。后端在完成增删改查的功能后，一般会创建新的实体类，返回前端，并不会直接返回结果。// 操作成功 public static final int SUCCESS = 200;// 对象创建成功 public static final int CREATED = 201;
后端传的long数据类型，前端js解析后精度失准
Liw_J的博客
10-28 738
前言：昨晚上和后端对接口，一个返回的json数组里面，有两条数据一直对不上号。他在postman里面测是一个数据，到了我这边拿到数据以后console.log，那个参数的数据值就变了。一直到不到原因 这是前端打印以后的fileId，但是在后端测postman里面fileId一直是:587030786809663489,意味着后端传的数据和前端拿到的数据不同 但是在前端response里面可以看到，后端传的数据是正确的，在Preview里面确不正确： 2. 原因： js解析 json 数据时，对..
后端 Long类型，超过 js 的number类型最大值的解决办法
Jarvis's Blog
11-18 3050
先看问题： 数据库 id 为 Bigint 类型： 通过后端逻辑取值返回给前端： JS 的number类型有个最大值（安全值）。即2的53次方，为9007199254740992（16位）。如果超过这个值，那么js会出现不精确的问题。 可以看出数据已经出错，js中数字类型最长为17位，导致后几位就会变成000，而导致后端查出来的数据与前端看到的ID不一致 解决办法可以这样： 使用 Fastjson 的 ToStringSerializer 注解，让系统序列化时，保留相关精度。 @JsonSe
Java中Long类型传入前端数值出错
m0_57305043的博客
03-04 1650
Java后端Long类型给前端传值出错及解决办法
解密Long型数据传递：Spring Boot后台如何避免精度丢失问题
weixin_45817985的博客
11-29 1131
解密Long型数据传递：Spring Boot后台如何避免精度丢失问题
JavaScript 无法存储 Java Long 类型数据问题
专注力、洞察力、分享力
06-30 1313
今天在解决一个需求问题的时候，遇到了一个难得一见的 JS 问题。这个问题大概是和一些同学在开发环境使用 == 来比较包装类型的整数一样，由于比较的数值在缓存范围内，因缘际会的错过了 bug 的出现。简单说一下问题经过，是这样的，笔者这个需求最终要求接口返回一组自定义结构的 k-v （不是单纯的键值对）数据，用于在前端表单中进行分类展示。后端响应的数据结构类似如下： 在前端表单中的展示效果大概如下：笔者相信各位同学都应该猜得到，当提交表单的时候，前端肯定会把选中的镜像的 val 值传递给后端，然后由后端继续进
详解 AJAX-SpringBoot 前后端数据交互
热门推荐
qq_41775769的博客
02-24 1万+
详解 AJAX-SpringBoot 前后端数据交互 1. Ajax 概述 Ajax 的英文全称是 ”Asynchronous JavaScript and XML“，即 ”异步的 JavaScript 和 XML“。其核心是通过 JavaScript 的 XMLHttpRequest 对象，以一种异步的方式，向服务器发送数据请求，并且通过该对象接收请求返回的数据，从而实现客户端与服务器端的数据交互。 优点：Ajax 能够刷新指定的页面区域（局部刷新），而不是刷新整个页面，从而减少客户端和服务器端之间的数
Java从坚持到精通-SpringBoot项目-多来米云客（持续更新中）
weixin_44466906的博客
05-28 1179
1.node.js：是一个开源的、跨平台的JavaScript运行时环境，可以理解成java当中需要安装的jdk2.npm：是JavaScript依赖包管理工具，全世界都可以用它来共享JavaScript包，负责前端项目的打包，插件下载等，可以理解成java中的maven3.Vite：是快速构建前端Vue项目的脚手架，可以理解为开发SpringBoot的Spring Initializer快速构建工具（之前一般是使用Vue-Cli，不过官方说建议使用Vite）
SpringBoot 接口如何加密解密
hymuuuu的博客
07-03 907
自定义starter步骤创建工厂，编写功能代码声明自动配置类，把需要对外提供的对象创建好，通过配置类统一向外暴露在resource目录下准备一个名为的文件，以为key，自动配置类为value列表，进行注册接口相应数据的时候，返回的是加密之后的数据 接口入参的时候，接收的是解密之后的数据，但是在进入接口之前，会自动解密，取得对应的数据。
Java 将Long类型数值 返回个前端 前端显示精度丢失 超过16位以后 JS解析只能解析到16位 默认后面都是0
liu_lucis的博客
03-06 2245
最近遇到一个 同步三方的数据 他们返回的数值类型是Long 但是需要展示给前端显示 我也就使用了Long类型 但是传到前端的时候 显示有问题 后来百度到问题是 JS解析 只能解析到16位 16位以后 就默认显示0 所以 前端暂时有问题 但是这个数值在很多代码层都在使用 String和Long 类型来回转来转去 有点烦 最后google 找到了解决法子 所以记录一下 ...
转载：参数是List<Long>类型，但是报错 Failed to instantiate [java.util.List]: Specified class is an interface
yichenzhufeng的博客
11-28 1918
原文链接：https://www.aliyun.com/jiaocheng/1308912.html 因为网上大多是写入一个VO，转成数组再转回来，觉得很繁琐，就把自己找到的合适的博客转载过来了，方便大家查找，不过找不到作者，没有经过允许，但是标明了出处，不知道算不算侵权。希望作者大度知识共享，不要我的侵权费。 以下为原文内容： 摘要：错误信息提示Failedtoinstantiate[ja...
js获取后端Long类型返回json时number类型精度丢失
爱意迷了眼丶的博客
02-26 615
后端java是Long类型，其精度比number高，前端可以拦截接口返回的内容进行处理(因为默认会使用JSON.parse()解析从后端的来的数据)，再用json-bigint插件把长类型数字解析成字符串，解析失败就代表没有长数字可解析，使用JSON.parse()解析。JS的数字类型目前支持的最大值为：（2的53次方，即 9007199254740992），一旦数字超过这个值，JS将会丢失精度，导致前后端的值出现不一致。2、前后端调用api的地方，加上。
Java后端返回Long类型数据与前端展示不一致（精度丢失）
u014800975的博客
06-28 6343
问题描述 接口查询数据返回，有一个Long类型字段，postman返回与数据库一致（= 63354019632316416），swagger返回不一致（= 63354019632316420），chrome查看返回数据也不一致（= 63354019632316420）。 原因 Java中Long类型可以表示的最大值是2 ^63-1，而JS的基础类型Number可以表示的最大值是 2 ^53。所以后端返回的数据大于Number能表示的最大值时无法正确解析，出现精度丢失的问题。 解决方案 1、将返回给前端的Lo
SpringBoot项目接口返回值中Long类型超过17位导致前端js在调用时出现丢失精度问题
今晚摸鱼
11-09 2205
解决办法很简单将Long类型的字段转为String类型返给前端即可，解决方法有3种可根据自己项目情况来选择: 方式1 在实体类种直接将Long类型的字段修改为String类型 方式2 在要返回的字段上添加@JsonSerialize(using = ToStringSerializer.class)注解，这样就能在序列化时自动将该字段类型转为String类型返给前端，相较于方式1不影响其他调用该字...
前端接收服务端返回long类型的数据精度失真问题
qq_39454432的博客
09-04 2759
Ajax请求服务端long类型的数据精度失真处理 原因： Js是弱类型的语言，在变量声明时不会限制数据类型，所以后端返回的什么数据类型前端接收到之后就是什么数据类型，js中用53位保存数据，能精准表示的最大证书是Math.pow(2, 53)，十进制即 9007199254740992，后端返回的long类型的数据大于这个数，所以使用js的数字类型保存long类型的数据类型时就出现了失真的问题，前端接收到的已经不是服务端返回的真实数据了 解决方法： 服务端解决：服务端将long类型的数据转化为字符串类型再
前端接收LONG类型精度失真
weixin_40912627的博客
08-27 1167
实用swagger-ui测试发现返回的雪花算法生成的long类型id精度失真，查询后得知前端js处理不了过长的long类型，于是只能后端修改把返回long转成String；修改实体类太麻烦，jackson自带注解可以在返回到前端把Long转为String，只需在返回字段上加@JsonFormat(shape = JsonFormat.Shape.STRING)注解即可 ...
前端吐槽的后端接口那些事
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
01-26 319
作者：海角在眼前链接：https://www.cnblogs.com/lovesong/p/5533149.html今天一位前端开发人员扯起了后端接口的皮，那个兄弟对后端人员提供的接口很...
JS大坑之JSON解析时，数字超过一定位数精度丢失，导致数据有误的解决办法
淮水竹亭
05-19 1332
参考链接
springboot后端接口正常，但没数据传到前端
最新发布
07-01
在排查 Spring Boot 接口返回正常但前端接收不到数据的问题时，需要从多个层面进行分析和验证。以下是一些常见的排查方向及解决方法： ### 1. 检查响应头与响应体格式 确保后端接口的响应头中 `Content-Type` 正确指定了返回的数据类型。例如： - 如果是 JSON 数据，应设置为 `application/json`。 - 如果是文件流（如图片），应设置为 `application/octet-stream` 或 `image/*`。 此外，检查响应体是否确实包含预期的数据内容。可以使用 Postman、curl 或浏览器开发者工具查看实际返回的数据结构和内容[^1]。 ### 2. 前端请求配置问题 如果使用 Axios 进行请求，务必确认是否正确设置了 `responseType` 参数。对于二进制数据（如图片）应设置为 `"blob"`，而对于 JSON 数据则保持默认值 `"json"`。示例代码如下： ```javascript axios.get('/api/image', { responseType: 'blob' // 必须设置为 blob 以接收二进制数据 }).then(response => { const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'image.png'); document.body.appendChild(link); link.click(); }); ``` 若未正确设置 `responseType`，Axios 可能会尝试将其解析为 JSON 并导致错误或无法获取原始数据。 ### 3. 跨域问题（CORS） 跨域资源共享（CORS）限制可能导致前端无法接收到响应。检查后端是否启用了 CORS 支持，并且允许了正确的域名、方法和头部信息。可以在 Spring Boot 应用中通过如下方式启用全局 CORS 配置： ```java @Configuration @EnableWebMvc public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**") .allowedOrigins("http://localhost:8080") // 允许的源 .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的方法 .allowCredentials(true); // 是否允许发送 Cookie } } ``` 如果未正确配置 CORS，则可能因浏览器的安全策略而拦截响应，前端将无法接收到数据[^1]。 ### 4. 数据序列化与反序列化问题 当返回的数据类型较为复杂或涉及特定格式（如日期、数字精度等）时，需确保前后端的数据格式兼容。例如，Java 中的 `Long` 类型在传输到 JavaScript 时可能会丢失精度，因此建议将 `Long` 类型转换为字符串再返回。可以通过自定义 Jackson 的序列化规则实现： ```java @Configuration public class JacksonConfig { @Bean public Jackson2ObjectMapperBuilder jackson2ObjectMapperBuilder() { return new Jackson2ObjectMapperBuilder() .serializerByType(Long.class, new ToStringSerializer()) .serializerByType(Long.TYPE, new ToStringSerializer()); } } ``` 这样可以避免由于数值过大而导致前端解析失败的问题[^3]。 ### 5. 网络请求异常处理 即使后端接口正常运行，也可能由于网络中断、代理配置错误等原因导致前端无法接收到响应。建议在前端代码中添加异常捕获逻辑，打印详细的错误信息以便定位问题： ```javascript axios.get('/api/data') .then(response => { console.log('成功接收数据:', response.data); }) .catch(error => { if (error.response) { // 请求已发出，但服务器响应状态码不在 2xx 范围内 console.error('服务器响应错误:', error.response.status, error.response.data); } else if (error.request) { // 请求已发出，但没有收到响应 console.error('无响应:', error.request); } else { // 其他错误 console.error('请求出错:', error.message); } }); ``` 通过上述日志输出，可以判断问题是发生在请求阶段还是响应阶段。 ### 6. 日志与调试工具辅助排查 后端可通过日志记录接口调用情况，确认请求是否真正到达并成功处理。同时，利用 Spring Boot Actuator 提供的 `/actuator/health` 和 `/actuator/metrics` 等端点监控服务状态。前端则可借助浏览器的 Network 面板查看请求详情，包括请求头、响应头、响应时间等信息。 ---
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值