NuxtJS中提交Contact Form 7表单返回validation_failed错误如何解决？

问题根源 #

你遇到的validation_failed报错由两个Axios的错误用法导致：

• 手动指定Content-Type: multipart/form-data时没有携带表单必需的boundary分隔符参数，覆盖了浏览器自动生成的合法请求头，服务端无法正常解析表单字段
• Axios的post方法参数使用错误，你把请求体和配置项都放在了第二个参数中，导致FormData没有作为完整请求体发送，配置的请求头也未生效

正确实现代码 #

formSubmit(e) {
  e.preventDefault();
  const formData = new FormData();
  const dat = {
    'your-radio': this.formRadio,
    'your-project': this.formProject,
    'your-name': this.formName,
    'your-tel': this.formTel,
    'your-email': this.formMail,
    'your-date': this.formDate
  }
  for(const name in dat) {
    formData.append(name, dat[name])
  }

  this.$axios.post(
    // 第一个参数：请求地址
    'https://example.wp/wp-json/contact-form-7/v1/contact-forms/ID/feedback',
    // 第二个参数：直接传入FormData作为请求体
    formData,
    // 第三个参数：请求配置项
    {
      headers: {
        // 不需要手动写完整的multipart/form-data头，设为undefined让浏览器自动生成带boundary的合法值
        // 如果你没有全局配置Axios默认Content-Type，也可以完全省略headers配置
        'Content-Type': undefined
      }
    }
  )
  .then((response) => {
    console.log(response.data.message)
  })
}

原理说明 #

当请求体为FormData类型时，浏览器会自动识别请求类型，为请求头添加multipart/form-data以及随机生成的boundary分隔符，服务端依靠这个分隔符拆分表单内的不同字段。手动指定Content-Type会丢失boundary参数，导致Contact Form 7无法解析提交的字段内容，直接判定校验失败。
你使用XMLHttpRequest时未手动设置Content-Type，浏览器自动完成了参数处理，所以可以正常运行；Postman在你手动设置multipart/form-data时会自动补全boundary参数，和浏览器默认行为不同，所以Postman手动配置时可以正常提交。

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