Netlify表单在提交时获取GET而不是POST请求

Question

我有一个基本的Netlify表单（based on this guide），其中包含name，email和message字段。具有以下提交功能：

const handleSubmit = event => {
    event.preventDefault();
    const data = {};
    const scopedForm = [...formState];

    let isValidForm = validateForm(scopedForm);
    setFormState([...scopedForm]);

    if (!isValidForm) return false;

    formInputs.forEach(input => data[input.name] = input.value);

    fetch(`/`, {
      method: `POST`,
      headers: {
        'Accept': `application/x-www-form-urlencoded;charset=UTF-8`,
        'Content-Type': `application/x-www-form-urlencoded`,
      },
      body: encode({
        'form-name': `Contact Form`,
        ...data,
      }),
    })
      .then(() => console.log(`OK`))
      .catch(error => alert(error));
  };

  const encode = data => {
    return Object.keys(data)
      .map(key => encodeURIComponent(key) + `=` + encodeURIComponent(data[key]))
      .join(`&`);
  };

非常简单，除了验证之外，我还创建了一个data对象，并用一对data[input.name] = input.value填充了它。一切均在本地以及develop和build模式下正常工作。我可以看到一个POST请求，但是在生产中，它变成了一个GET：

我尝试将内置的fetch更改为axios，但结果是相同的。我不知道是否需要在服务器中添加一些自定义配置，或者如何绕过它。

我得到的HTML结构是：

<form name="Contact Form" method="POST" action="/" data-netlify="true" data-netlify-honeypot="bot-field" data-netlify-recaptcha="true">
   <div><label for="form-name"><input type="hidden" name="form-name" value="Contact Form"></label></div>
   <div><label for="bot-field"><input type="hidden" name="bot-field" value=""></label></div>
   <div><label for="name">Name:<input type="text" name="name" value="Chancellor Lawson"></label></div>
   <div><label for="email">Email:<input type="text" name="email" value="fivyhohy@mailinator.com"></label></div>
   <div><label for="message">Message:<textarea name="message">Ea quisquam ea vel e</textarea></label></div>
   <button type="submit">Send</button>
</form>

我已经阅读了许多类似的问题，文章和指南，但没有帮助。

Answer 1

为了解决此问题，我将回答我自己的问题，并将所有优点提交给Quentin。正如他指出的那样，该解决方案正在删除Accept标头，因为它仅接受application/x-www-form-urlencoded;charset=UTF-8请求。因此标题应该像这样：

  headers: {
    'Content-Type': `application/x-www-form-urlencoded`,
  },

来自MDN documentation：

接受请求HTTP标头会宣传哪些内容类型， 表示为MIME类型，客户端能够理解。使用 内容协商，然后服务器选择建议之一， 使用它并通过Content-Type通知客户其选择 响应头。浏览器为此标头设置足够的值 根据完成请求的上下文：在获取请求时 CSS样式表为请求设置的值与 提取图像，视频或脚本。