Spring Boot新手调用POST注册接口返回404与JSON解析报错求助

问题根因说明 #

你遇到的两个报错是因果关系：

• 首先POST请求404找不到接口，后端默认返回HTML格式的404错误页（内容以<开头）
• 前端代码强制把返回结果按JSON解析，就触发了Unexpected token < in JSON的语法错误

排查&解决步骤 #

第一步：先修复JS代码的语法错误 #

你写的fetch方法语法写错了，body参数被放在了fetch配置对象的外部，根本不会生效：
原来的错误代码：

const request = await fetch('api/users', { method: 'POST', headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
});
body: JSON.stringify(dates)

修正后：

const request = await fetch('api/users', { 
  method: 'POST', 
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(dates) // 要放到配置对象的大括号里面
});

第二步：修正请求地址，匹配后端接口 #

你现在前端请求的地址是http://localhost:63342/insacol/static/api/users，有两处问题：

1. 端口不对：63342是IDEA打开静态HTML的预览端口，Spring Boot默认启动端口是8080，你需要把请求地址改成后端服务的实际地址，比如直接写全路径：http://localhost:8080/api/users
2. 多余路径前缀：你后端接口只配置了api/users路径，没有/insacol/static/前缀，不要用相对路径请求，避免静态资源路径自动拼接前缀

另外如果前后端端口不一致，需要在Spring Boot后端加跨域配置，或者给Controller类上加@CrossOrigin注解放行跨域请求。

第三步：调整后端接口适配前端解析 #

你现在的后端接口返回类型是void，没有返回值，前端调用request.json()的时候会因为响应体为空解析失败，建议改成返回JSON格式的结果：

@RequestMapping(value = "api/users", method = RequestMethod.POST)
public Map<String, Object> insertUser(@RequestBody User user){
    userDao.insertar(user);
    Map<String, Object> result = new HashMap<>();
    result.put("code", 200);
    result.put("msg", "注册成功");
    return result;
}

如果不需要返回内容，也可以把前端的const users = await request.json()改成先判断响应状态再处理：

if (request.ok) {
  // 响应正常再处理，无返回值的话可以不用调用json()
  alert("注册成功")
} else {
  alert("请求失败，状态码：" + request.status)
}

验证顺序 #

先启动Spring Boot后端服务，确认用Postman等工具发POST请求到http://localhost:8080/api/users能通，再修改前端代码测试即可。

内容的提问来源于stack exchange，提问作者Guillermo Matos