使用Axios PATCH请求发送FormData更新用户信息的问题

1. 修正Axios请求配置 #

请求体为空的核心原因是FormData没有放在Axios配置的data字段中——Axios仅会识别data字段作为请求体内容。修正后的代码如下：

const formData = new FormData();
formData.append('key1', someData.value);
formData.append('key2', someData.value);
formData.append('key3', someData.value);

try {
  const res = await axios({ 
    method: 'PATCH', 
    url: someUrl, 
    data: formData // 将FormData放入data字段
  });
} catch (err) {
  console.log(err);
}

Axios会自动识别data为FormData类型，自动设置请求头Content-Type: multipart/form-data，无需手动配置。

2. 适配动态表单字段 #

直接传递FormData到data字段即可适配任意动态表单字段，无需手动提取键值对转成对象。FormData本身就是键值对结构，后端通过表单解析中间件（比如Express的multer）就能直接读取所有字段。

3. 解决数据篡改风险 #

前端的任何数据都存在被篡改的可能，安全校验必须在后端实现：

• 后端接收请求后，只保留允许更新的字段（比如允许更新username、email，拒绝role、id这类敏感字段）
• 对字段值做合法性校验（比如邮箱格式、密码长度）
• 结合用户权限判断，确保当前用户只能修改自身信息

前端用空对象收集表单值的方式本身并非不良实践，但不能依赖前端保证数据安全，后端的校验才是核心屏障。

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