使用axios发送表单POST请求到服务端报400错误如何解决

400错误本质是请求参数格式/内容不符合接口校验规则，你这段代码的核心问题和修复方式如下：

• 最容易踩的坑：手动写死Content-Type: multipart/form-data请求头。使用axios提交FormData时，浏览器会自动生成带boundary分隔符的完整Content-Type头，你手动设置后会丢失boundary参数，服务端根本无法正确解析表单内容，直接返回参数错误。
• 代码中使用的keyCodes、file两个变量未在函数作用域内定义，如果这两个值为undefined、null，或者类型不符合接口要求（比如image字段要求传File对象，你传了普通字符串/空值；title要求传字符串，你传了数组/数字），都会触发服务端校验失败返回400。
• 核对接口文档对tags字段的格式要求：部分接口的tags字段要求传数组而非逗号分隔的字符串，如果格式不匹配也会报400。

修复后代码 #

const buildDiscount = async token => {
  // 提前校验必填参数合法性
  if (typeof keyCodes !== 'string' || !(file instanceof File)) {
    console.error('参数格式错误：title需为字符串，image需为合法File对象');
    return;
  }
  const data = new FormData();
  data.append('title', keyCodes);
  data.append('text', 'test text');
  data.append('image', file);
  // 若接口要求tags为数组，注释下一行，改用循环append的方式传值
  // ['one', 'two', 'three'].forEach(tag => data.append('tags', tag));
  data.append('tags', 'one,two,three');

  try {
    const res = await axios.post('https://api.freerealapi.com/panel/blogs/', data, {
      headers: {
        // 移除手动设置的Content-Type，让axios自动生成合法请求头
        Authorization: `Bearer ${token}`,
      },
    })
    console.log(res.data);
  } catch (error) {
    // 打印服务端返回的具体错误信息，可直接定位不符合要求的字段
    console.log('请求失败详情：', error.response?.data);
  }
}

如果调整后依然返回400，直接查看catch块打印的error.response.data内容，服务端会明确返回哪个字段校验不通过，按照提示调整对应字段的传值格式即可。

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