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

我有一个基本的Netlify表单（），其中包含

名称

、

电子邮件

和

消息

字段。具有以下提交功能：

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

填充它。在本地，以及在

开发

和

构建

模式下，一切都按预期工作。我可以看到一个

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>

姓名：
电邮：
信息：Ea quisquam Ea vel e
发送

---

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

为了结束这一问题，我将回答我自己的问题，并给出所有的优点。正如他指出的，解决方案是删除

Accept

标题，因为它只接受

application/x-www-form-urlencoded；字符集=UTF-8

请求。因此，标题应如下所示：

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

发件人：

Accept request

HTTP

标头公布了哪些内容类型， 以MIME类型表示，客户机能够理解。使用 内容协商，然后服务器选择其中一个方案， 使用它并使用

内容类型通知客户端其选择
响应头。浏览器为此标头设置足够的值
根据执行请求的上下文：获取
CSS样式表为请求设置的值与
获取图像、视频或脚本

为了结束这一问题，我将回答我自己的问题，并向各位介绍所有优点。正如他指出的，解决方案是删除
Accept
标题，因为它只接受
application/x-www-form-urlencoded；字符集=UTF-8
请求。因此，标题应如下所示：

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

发件人：

Accept request
HTTP
标头公布了哪些内容类型，
以MIME类型表示，客户机能够理解。使用
内容协商，然后服务器选择其中一个方案，
使用它并使用
内容类型通知客户端其选择
响应头。浏览器为此标头设置足够的值
根据执行请求的上下文：获取
CSS样式表为请求设置的值与
获取图像、视频或脚本

提取前，
validForm
是否会返回
False
？否，因为
控制台正在提示
OK
消息。我已尝试删除该条件，结果是相同的。这不太可能与您的实际问题有关，但告诉服务器您将只接受
application/x-www-form-urlencoded；charset=UTF-8
没有意义。请检查Chrome中“网络”选项卡上的“类型”列。确保您正在查看的请求是由xhr触发的请求。如果不是，那么您提供的代码就不是生成HTTP请求的代码。这就是@Quentin的诀窍。一旦我删除了
Accept
标题，它就工作了。如果您添加一个答案，我将接受以结束此问题。
validForm
是否会在获取前返回
False
？否，因为
控制台
正在提示
确定
消息。我已尝试删除该条件，结果是相同的。这不太可能与您的实际问题有关，但告诉服务器您将只接受
application/x-www-form-urlencoded；charset=UTF-8
没有意义。请检查Chrome中“网络”选项卡上的“类型”列。确保您正在查看的请求是由xhr触发的请求。如果不是，那么您提供的代码就不是生成HTTP请求的代码。这就是@Quentin的诀窍。一旦我删除了
Accept
标题，它就工作了。如果你添加一个答案，我将接受结束这个问题。