Публикация данных формы с помощью Fetch API

При использовании Fetch API для отправки данных формы следует учитывать два основных формата:

Multipart/ Form-Data

При использовании FormData для создания тела запроса данные автоматически отправляются в формате multipart/form-data. Это поведение FormData по умолчанию, и его нельзя изменить.

Application/x-www-form-urlencoded

Чтобы отправить данные в формате application/x-www-form-urlencoded, вы есть несколько вариантов:

1. Строка в кодировке URL:

fetch("api/xxx", {
    body: "[email protected]&password=pw",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    method: "post",
});

2. Объект URLSearchParams:

const data = new URLSearchParams();
data.append("email", "[email protected]");
data.append("password", "mypassword");

fetch("api/xxx", {
    body: data,
    method: "post",
});

Обратите внимание, что указание заголовка Content-Type не требуется при использовании URLSearchParams, поскольку он автоматически устанавливает правильный тип контента.

3. URLSearchParams из FormData:

const data = new URLSearchParams(new FormData(formElement));

fetch("api/xxx", {
    body: data,
    method: "post",
});

Эта опция позволяет передать объект FormData напрямую для создания объекта URLSearchParams. Однако его поддержка браузерами может быть ограниченной, поэтому обязательно тщательно протестируйте его перед использованием.