Nuxt JS 集成 Netlify Forms 提交表单时报404错误求助

数据老陈

2026-10-2

问题核心原因

你遇到的404错误是提交请求的格式、参数配置错误导致Netlify无法识别表单提交请求，具体错误点如下：

handleSubmit 方法中存在未定义变量：仅从FormData解构了name字段，lastName/subject等字段未取值就直接使用，导致提交参数异常
Axios配置写错：请求头配置项是headers不是header，导致Content-Type未生效，Netlify无法解析提交内容
请求体格式错误：将url编码字符串展开到对象中提交，格式完全不符合application/x-www-form-urlencoded要求
蜜罐字段缺失：配置了data-netlify-honeypot="bot-field"但未添加对应隐藏输入框，可能触发Netlify的拦截规则

修复步骤

1. 修改Contact.vue表单代码

先补充蜜罐字段的隐藏输入框，放在form标签内的form-name隐藏input后面：

<input type="hidden" name="bot-field" />

2. 重写handleSubmit提交方法

直接用FormData提交，不需要自行编码，避免格式错误：

methods: {
  async handleSubmit(event) {  
    const formData = new FormData(event.target)
    // 直接提交FormData，Axios会自动设置正确的Content-Type
    try {
      await this.$axios.post("/", formData)
      // 可自行添加提交成功的提示、跳转逻辑
      alert("提交成功")
    } catch (err) {
      // 可自行添加提交失败的处理逻辑
      console.error("提交失败：", err)
    }
  }
}