ReactJS通过Axios向Spring Boot提交数据遇500错误求助

你遇到的500错误是后端抛出未处理异常导致的，结合Postman请求正常的情况，前端代码存在以下几个核心问题：

1. 请求体字段与后端实体类不匹配 #

前端构造的product对象使用category_id下划线命名，但Spring Boot默认采用驼峰字段映射（Jackson默认配置）。如果你的后端Product实体类中对应字段是categoryId（驼峰格式），前端传的下划线字段无法被正确绑定，会导致参数缺失，进而触发service层异常返回500。

修复方案：
将前端字段改为与后端实体类一致的驼峰命名：

let product = {
    title: title,
    description: body,
    price: price,
    photo: photo,
    categoryId: parseInt(category) // 替换category_id为categoryId
}

如果后端强制要求下划线字段，可在实体类字段上添加Jackson注解：

@JsonProperty("category_id")
private Long categoryId;

2. 表单校验逻辑错误 #

当前校验条件使用||（逻辑或）：

if (title !== "" || body!== "" || price !== "" || category !== "0" || photo !== "")

这意味着只要有一个字段非空就会提交请求，会导致必填字段为空的情况（比如title为空但body非空）。如果后端实体类有@NotNull/@NotBlank等非空校验，会直接抛出数据绑定异常返回500。

修复方案：
将||改为&&（逻辑与），确保所有必填字段都非空才提交：

if (title !== "" && body!== "" && price !== "" && category !== "0" && photo !== "")

3. 未查看后端具体异常信息 #

当前前端catch块仅打印错误对象，无法获取后端返回的异常详情，不利于定位问题。

修复方案：
修改callApi的catch逻辑，打印后端返回的错误详情：

export function callApi(endpoint, method = 'GET', body) {
    return axios({
        method: method,
        url : `${API_URL}/${endpoint}`,
        data : body,   
    })      
    .catch(e => {   
        console.log("后端错误详情：", e.response.data); // 打印具体异常信息
        throw e; // 抛出错误供上层处理
    })
}

通过浏览器控制台的异常信息，你可以精准定位后端抛出的具体问题（比如字段绑定失败、数据库约束异常等）。

4. 请求URL路径验证 #

确认API_URL的配置是否正确：
后端Controller的@RequestMapping是api/products，完整接口路径为http://localhost:8080/api/products。如果你的API_URL是http://localhost:8080，拼接后会变成http://localhost:8080/products，与后端路径不匹配，可能触发500（若后端有全局异常拦截）。

验证方式：
在浏览器开发者工具的Network面板中查看请求的完整URL，确认是否与后端接口路径一致。

额外问题：回调逻辑与返回值不匹配 #

后端createProduct接口返回的是Product实体对象，但前端回调中判断item.data===1，这一条件永远不会成立，因为后端不会返回数字1。

修复方案：
根据后端返回的实体结构调整判断逻辑：

POST_ADD_PRODUCT(`products`, product).then(item => {
    if(item.data?.id){ // 假设Product实体包含id字段，通过id判断创建成功
        setCheckAdd(true);
    }
})

内容的提问来源于stack exchange，提问作者Peter Just Peter