时间戳

首页 > 解决方案 > Netlify 表单在提交时获取 GET 而不是 POST 请求

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

问题描述

我有一个基本的 Netlify 表单（基于本指南），其中包含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>

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

标签： javascriptgatsbynetlifyjamstacknetlify-form

解决方案

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

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

来自MDN 文档：

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

推荐阅读