React用FormData发Axios POST请求报500错误，Postman却正常，求排查

使用Postman发送POST请求可成功提交，但编写如下React代码发送请求时，服务器无法接收数据且返回500错误。请问这是我的代码问题还是服务器问题？

const postChallenge = async () => {
  try {
    const formData = new FormData();
    const newData = {
      title: 'title',
      content: 'contents',
    };
    formData.append('requestBody', JSON.stringify(newData));
    formData.append('image', null);
    const res = await API.POST({
      url: '(serverurl)',
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });
  } catch (err) {
    console.log(err);
  }
};

Postman能成功发起请求，说明服务器本身的业务逻辑是正常的，问题大概率出在你的前端代码上，主要有以下几个问题：

• 手动设置Content-Type: multipart/form-data错误：当使用FormData提交请求时，浏览器会自动生成包含boundary（表单分隔符）的Content-Type头，格式类似multipart/form-data; boundary=----WebKitFormBoundaryxxx。手动设置固定的Content-Type会丢失这个关键的boundary，导致服务器无法正确解析表单数据。
• image字段传null不符合要求：FormData.append('image', null)会把image字段的值设为字符串"null"，而Postman中如果不需要上传图片，你可能是直接忽略该字段，或者传递的是空文件对象，两者的格式差异会导致服务器解析失败。
• API封装可能自动处理请求头：如果你的API.POST是基于axios等工具封装的，这类库会自动识别FormData并设置正确的请求头，手动设置反而会覆盖掉正确的头信息。

修改后的代码示例 #

const postChallenge = async () => {
  try {
    const formData = new FormData();
    const newData = {
      title: 'title',
      content: 'contents',
    };
    formData.append('requestBody', JSON.stringify(newData));
    // 不需要上传图片就直接删除该行；如果要传空文件，替换为new Blob()或者实际的文件对象
    // formData.append('image', new Blob());
    
    const res = await API.POST({
      url: '(serverurl)',
      data: formData,
      // 移除手动设置的Content-Type，让API封装自动处理请求头
    });
  } catch (err) {
    console.log(err);
  }
};

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