Форма Netlify, извлекающая GET вместо запроса POST при отправке

Question

У меня есть базовая форма 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="[e-mail]"></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:

Запрос на принятие HTTPзаголовок сообщает, какие типы контента, выраженные как типы MIME, понятны клиенту. Используя согласование содержимого, сервер затем выбирает одно из предложений, использует его и сообщает клиенту о своем выборе с помощьюContent-Typeзаголовок ответа. Браузеры устанавливают адекватные значения для этого заголовка в зависимости от контекста, в котором выполняется запрос: при получении таблицы стилей CSS для запроса устанавливается другое значение, чем при получении изображения, видео или сценария.