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

【问题标题】：Netlify form fetching a GET instead of POST request on submitNetlify 表单在提交时获取 GET 而不是 POST 请求
【发布时间】：2020-07-24 17:17:16
【问题描述】：

我有一个基本的 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>

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

【问题讨论】：

可以validForm 在获取之前返回False 吗？
否，因为console 正在提示OK 消息。我试过删除条件，结果是一样的。
这不太可能与您的实际问题有关，但告诉服务器您将只接受application/x-www-form-urlencoded;charset=UTF-8 的响应是没有意义的。跨度>
检查 Chrome 网络标签上的 Type 列。确保您正在查看的请求是由 xhr 触发的。如果不是，则您提供的代码不是生成 HTTP 请求的代码。
这成功了@Quentin。一旦我删除了 Accept 标头，它就起作用了。如果您添加答案，我将接受关闭问题。

标签： javascript gatsby netlify jamstack netlify-form

【解决方案1】：

为了结束这个问题，我会回答我自己的问题，把所有优点都交给Quentin。正如他所指出的，解决方案是删除 Accept 标头，因为它只接受 application/x-www-form-urlencoded;charset=UTF-8 请求。所以标题应该是这样的：

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

来自MDN documentation：

Accept 请求 HTTP 标头通告哪些内容类型，表示为 MIME 类型，客户端能够理解。使用内容协商，然后服务器选择其中一个提案，使用它并通过Content-Type 通知客户其选择响应头。浏览器为此标头设置了足够的值取决于完成请求的上下文：当获取一个 CSS样式表为请求设置的值与何时设置不同获取图像、视频或脚本。

【讨论】：