[解決済み】fetch apiでフォームデータを投稿するには？

質問

私のコード

fetch("api/xxx", {
    body: new FormData(document.getElementById("form")),
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        // "Content-Type": "multipart/form-data",
    },
    method: "post",
}

fetch api を使ってフォームを投稿してみたところ、以下のようなボディが送信されました。

-----------------------------114782935826962
Content-Disposition: form-data; name="email"

[email protected]
-----------------------------114782935826962
Content-Disposition: form-data; name="password"

pw
-----------------------------114782935826962--

(送信するたびにboundaryの数字が変わるのはなぜだろう...)

Content-Type": "application/x-www-form-urlencoded" で送信させたいのですが、どうしたらよいでしょうか？また、そのまま対処する場合、コントローラでどのようにデータをデコードすればよいのでしょうか？

私の質問に答えるために、私は私がでそれを行うことができます知っている。

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

jQueryで$("#form").serialize()のようなもの（jQueryを使わない）か、コントローラでmulitpart/form-dataをデコードする方法が欲しいのですが、どうすればよいでしょうか？でも、ご回答ありがとうございました。

解決方法は？

引用元 MDNについて FormData (強調)。

は FormData インターフェースは、フォームフィールドとその値を表すキーと値のペアのセットを簡単に構築する方法を提供します。 XMLHttpRequest.send() メソッドを使用します。 これは、フォームのエンコーディング・タイプを "multipart/form-data" .

そのため FormData にロックしていることになります。 multipart/form-data . を送信する方法はありません。 FormData オブジェクトをボディとして使用し ない でデータを送信します。 multipart/form-data の形式を使用します。

として送信したい場合 application/x-www-form-urlencoded の場合、本文を URL エンコードした文字列で指定するか、あるいは URLSearchParams オブジェクトを作成します。後者は残念ながら直接 form 要素を使用します。もし、フォームの要素を自分で反復処理したくないのであれば ( できる を使用して行います。 HTMLFormElement.elements ) を作成することもできます。 URLSearchParams オブジェクトから FormData オブジェクトを作成します。

const data = new URLSearchParams();
for (const pair of new FormData(formElement)) {
    data.append(pair[0], pair[1]);
}

fetch(url, {
    method: 'post',
    body: data,
})
.then(…);

を指定する必要がないことに注意してください。 Content-Type ヘッダを自分で作成します。

が指摘するように 僧侶タイム を作成することもできます。 URLSearchParams を渡して FormData オブジェクトの値をループで追加するのではなく、直接追加します。

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

しかし、これはまだブラウザで実験的にサポートされている部分があるので、使用する前にきちんとテストしてください。