Установка custom header для POST-запроса через форму

Быстрый ответ

Чтобы добавить пользовательские заголовки в POST-запрос формы, используйте API fetch:

fetch('endpoint', {
  method: 'POST',
  headers: {
    'Custom-Header': 'Value' // Такое будет у нас пользовательское значение заголовка
  },
  body: new FormData(document.getElementById('formId')) // Отправляем содержимое формы на сервер
})

Вместо 'endpoint' укажите адрес вашего сервера, 'Custom-Header' замените на имя вашего заголовка, текст 'Value' замените на его значение, а 'formId' – на идентификатор вашей формы.

JavaScript: обработка события POST-запроса

Для добавления дополнительных данных или обработки токенов аутентификации в пользовательских заголовках используйте можно XMLHttpRequest и addEventListener в JavaScript:

document.getElementById('formId').addEventListener('submit', function(event){
  event.preventDefault(); // Прерываем стандартную отправку формы.
  
  var formData = new FormData(this); // Собираем данные формы
  formData.append('Extra-Field', 'Extra Value'); // И добавляем что-то сверху
  
  var request = new XMLHttpRequest(); // Создаем экземпляр запроса
  request.open('POST', 'endpoint'); // Устанавливаем метод и адрес
  request.setRequestHeader('Another-Custom-Header', 'Value'); // Указываем пользовательский заголовок
  request.send(formData); // Отправляем данные
});

Продвинутые методы

В зависимости от потребностей, воспользуйтесь следующими методами:

Обработчик события onclick

Если нужно отправить данные, которые не включены в форму, назначьте обработчик события onclick кнопке или другому элементу.

Подробнее об этом расскажет наш спикер на видео

Скрытое поле в форме

Можно добавить к форме скрытые поля с помощью <input type="hidden" name="hiddenField" value="hiddenValue"> для передачи дополнительной информации в POST-запросе.

Использование cookies

Использование cookies позволяет не менять заголовки, так как они автоматически включаются в заголовки запроса. Для обеспечения безопасности применяйте флаги httpOnly и SSL/TLS.

Перехват отправки с помощью onsubmit

Задайте для формы обработчик onsubmit, чтобы управлять процессом отправки, выполнять проверки или, при необходимости, прерывать отправку.

Визуализация

Сравним POST-запрос с обычным письмом и с письмом, содержащим скрытую записку:

Традиционное письмо:

POST-запрос 📮: [Стандартные заголовки🎛️, Тело📦]

А вот письмо со скрытой запиской:

POST /form HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded
My-Special-Header: hidden-gem 🌟 // Здесь спрятано наше секретное сообщение!

А теперь представим письмо со специфическим содержимым:

📮 ➡️ 📡: [Стандартные заголовки🎛️, 🌟 My-Special-Header 🌟, Тело📦]

Работа с jQuery: AJAX и метод serialize()

Для преобразования данных формы в URL-приветствующую строку используйте метод serialize в jQuery. С комбинацией AJAX для асинхронной передачи получим прекрасный дуэт, исполняющий сериализацию и доставку:

$.ajax({
  url: 'endpoint',
  type: 'POST',
  data: $('#formId').serialize(), // Вот они, ваши сериализованные данные
  headers: {
    'Another-Custom-Header': 'Special Value' // Еще один пользовательский заголовок
  },
  success: function(response) {
    // Отмечаем успех
  },
  error: function() {
    // Обрабатываем ошибки
  }
});

Безопасность при работе с API на стороне сервера

При работе с API всегда помните о дополнительных мерах безопасности для cookies. Используйте, например, мидлвару cookie-parser в Node.js для управления cookies. Особо внимательно обращайтесь с персональными данными пользователей.

Полезные материалы

1. <form>: The Form element – HTML: HyperText Markup Language | MDN — для углубления ваших знаний о формах HTML.
2. XMLHttpRequest: setRequestHeader() method – Web APIs | MDN — подробнее о настройке HTTP-заголовков с помощью XMLHttpRequest.
3. HTML Forms – W3Schools — раздел о создании форм HTML и управлении их отправкой.
4. Custom HTTP headers: naming conventions – Stack Overflow — рекомендации по правильному именованию пользовательских HTTP-заголовков.
5. HTML Standard for Input Elements — стандарт для элементов ввода HTML.
6. GitHub – JakeChampion/fetch: A window.fetch JavaScript polyfill. — пример добавления пользовательских заголовков через Fetch API.
7. Request Config | Axios Docs — настройка HTTP-заголовков с помощью Axios.