后端接口运行正常但是接口无法返回数据结构

在Controller层打印数据没有问题,但是到前端显示就无法显示
在这里插入图片描述
在这里插入图片描述
你需要看你的Controller层的注解是否有问题是否有或者包含注解

@ResponseBody

平时使用习惯后不注意Controller层的注解就会这个问题

@RestController
@RequestMapping(value = "/userInfo")

@RestController中包含@ResponseBody和@Controller
在这里插入图片描述

@ResponseBody 可以将java对象转换为json格式数据,按我得理解没有的话就返回的是一个java对象,所有的问题都集中在Controller层,按照SpringMVC的工作流程来看从Handler 返回ModelAndView对象到HandlerAdapter再到DispatchServlet这部分返回到的是一个ModeAndView这种才能送到ViewResolver解析,但是按我们这边没有加@ResponseBody这种格式直接传的就没法处理,而返回给浏览器的就是404未找到改路径但是后台逻辑又执行了

在排查 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 面板查看请求详情,包括请求头、响应头、响应时间等信息。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值