React使用FormData上传文件时Java API无法识别RequestParams问题

核心错误分析 #

• 错误设置Content-Type头：手动指定multipart/form-data; boundary=XXX会导致后端解析失败，fetch发送FormData时会自动生成匹配的boundary并设置Content-Type，手动设置的固定值和实际boundary不匹配，后端无法正确解析表单字段。
• 请求体传递错误：代码中if (data) myInit.body = data;的data变量未定义，实际应该使用创建好的formData对象，导致请求未携带任何表单数据，后端接收不到参数。
• 多余响应头设置：Access-Control-Allow-Credentials和Access-Control-Allow-Origin是后端返回的响应头，前端请求时无需设置，属于无效操作。
• 字符串语法错误：serverName定义末尾缺失闭合引号，会导致URL拼接出错。

修正后的React代码 #

let formData = new FormData();
formData.append("file", file);
formData.append("uploadId", uploadId);
formData.append("uploadTypeId", uploadTypeId);
formData.append("dateEntered", dateEntered);
formData.append("description", description);
formData.append("enteredBy", enteredBy);

let myHeaders = new Headers();
myHeaders.append("type", "formData");
// 补全缺失的引号
const serverName = "http://localhost:8080/MyApp/api/uploads/update/";

const jwt = sessionStorage.getItem("jwt");
let headerJwt = "Bearer " + jwt;
if (jwt != null) {
    myHeaders.append("Authorization", headerJwt);
}

let myInit = {
    method: "PUT",
    headers: myHeaders,
    // 直接传入formData作为请求体，无需手动序列化
    body: formData
};

let url = serverName + endpoint;
let returnFetch = fetch(url, myInit);

补充说明 #

FormData对象不需要手动序列化，fetch会自动处理它的编码和传输逻辑，直接作为请求体传入即可。Postman能正常工作是因为它自动正确配置了Content-Type和boundary，且正确传递了表单数据，而你的React代码存在上述关键错误导致请求无效。

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