SpringBoot+React+Axios数据流问题：后端正常返回但前端无响应

兄弟，我看你遇到的情况是后端明明正常执行并打印了日志，但前端Axios的then回调里的console.log就是没输出，对吧？结合你的代码，我帮你梳理几个最可能的原因和解决办法：

1. 首先排查跨域（CORS）问题 #

你的前端和后端运行在不同的端口（前端应该不是8088吧？），浏览器的同源策略会拦截跨域请求的响应——哪怕后端已经处理完请求，浏览器也不会把响应交给前端代码，这时候then不会触发，但你没写catch所以看不到错误。

解决方法： #

在你的Spring Controller类上添加跨域注解（开发环境可以临时用*，生产环境要指定具体的前端域名）：

@Component 
@RestController
@CrossOrigin(origins = "*") // 新增这行
public class UsersController {
    // ... 原有代码不变
}

2. 调整后端响应格式，确保返回JSON #

你现在直接返回boolean类型，Spring默认会返回text/plain格式的响应，而Axios默认期望接收JSON格式数据，这可能导致Axios解析响应失败，进而不进入then回调。

解决方法： #

把后端返回值改成ResponseEntity<Boolean>，明确返回JSON格式：

@RequestMapping(value = "/", method = RequestMethod.POST)
public ResponseEntity<Boolean> testUser(@RequestBody User user){
    String email = user.getEmail();
    String password = user.getPassword();
    Optional<User> optUser = usersSource.checkIfExist(email);
    
    if(optUser.isPresent() && optUser.get().getPassword().equals(password)) {
        System.out.println("return true");
        return ResponseEntity.ok(true); // 返回200状态码+JSON格式的true
    }
    
    System.out.println("return false");
    return ResponseEntity.ok(false); // 返回200状态码+JSON格式的false
}

3. 前端必须添加错误捕获 #

你当前的代码只写了then，没有处理错误的catch分支，就算请求失败（比如跨域、响应解析失败），也看不到任何错误信息，根本没法排查问题。

解决方法： #

给Axios请求加上catch和finally，先看看到底哪里出错了：

axios.post('http://localhost:8088/', data) 
.then(response => { 
    console.log(response); 
})
.catch(error => {
    console.error('请求出错啦:', error); // 这里会打印具体错误原因，比如CORS错误、响应解析错误
})
.finally(() => {
    console.log('请求已完成');
});

额外排查技巧 #

打开浏览器的Network面板，找到这个POST请求，查看：

• 请求的状态码是200吗？如果是4xx/5xx说明后端有异常
• 响应头里有没有Access-Control-Allow-Origin？没有的话就是跨域问题
• 响应体是不是你预期的true/false？格式对不对

内容的提问来源于stack exchange，提问作者Janek Podwysocki