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>

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

Answer 1

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

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

来自MDN documentation：

The Accept request HTTP header advertises which content types, expressed as MIME types, the client is able to understand. Using content negotiation, the server then selects one of the proposals, uses it and informs the client of its choice with the Content-Type response header. Browsers set adequate values for this header depending on the context where the request is done: when fetching a CSS stylesheet a different value is set for the request than when fetching an image, video, or script.

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

Netlify form fetching a GET instead of POST request on submit

javascript

gatsby

netlify

jamstack

netlify-form