纯HTML+JS用Axios调用SpringBoot API报400错误求助

1. 请求头Content-Type不匹配 #

Postman会自动适配后端要求的Content-Type（比如application/json），但前端Axios如果没显式设置，后端可能无法解析请求体。

• 如果后端接收JSON格式，务必在Axios请求里加请求头：

  axios.post('http://localhost:8081/customers', yourData, {
    headers: {
      'Content-Type': 'application/json'
    }
  })
  

• 如果后端接收表单数据（application/x-www-form-urlencoded），用URLSearchParams包装数据：

  const formData = new URLSearchParams();
  formData.append('username', document.getElementById('username').value);
  formData.append('email', document.getElementById('email').value);
  axios.post('http://localhost:8081/customers', formData);
  

2. 请求体数据格式/字段不匹配 #

Postman里你手动构造的请求体是符合后端DTO结构的，但前端拼接的数据可能存在字段名写错、数据类型不符（比如把数字传成字符串、日期格式不对）的问题。

• 发送请求前先在控制台打印数据，和Postman里的请求体对比：

  console.log('要发送的数据:', yourData);
  

  重点核对字段名、必填项、数据类型是否完全一致。

3. 表单默认提交行为未阻止 #

如果你的HTML里用了<form>标签，点击提交按钮时浏览器会触发默认的表单提交（跳转页面），导致Axios请求被中断，表现为400错误。

• 给表单添加提交事件，阻止默认行为：

  document.querySelector('#registerForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认跳转
    // 这里执行Axios请求逻辑
  });
  

4. 后端参数校验失败 #

后端可能加了校验注解（比如@NotNull、@Email），前端传的数据不符合规则（比如邮箱格式错误、必填项为空），导致后端返回400。

• 查看SpringBoot后端的控制台日志，里面会有具体的校验失败提示（比如"手机号格式不正确"），对应修正前端输入。

5. 跨域配置问题（隐性400） #

有时候跨域配置不完整，会导致请求被浏览器拦截，表面报错400。

• 在SpringBoot的Controller类上临时添加@CrossOrigin(origins = "*")（开发环境用，生产环境要指定具体域名），或者全局配置CORS。

快速调试技巧 #

打开浏览器开发者工具的Network面板，查看发送的POST请求：

• 检查Request Headers里的Content-Type是否正确
• 对比Request Payload和Postman里的请求体结构
• 查看Response标签里的详细错误信息，后端通常会返回具体的失败原因

内容的提问来源于stack exchange，提问作者Kane Iroshan