Fetch API を使用したフォーム データの投稿

Fetch API を利用してフォーム データを送信する場合、考慮すべき主な形式は 2 つあります。

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",
});

URLSearchParams を使用する場合、正しいコンテンツ タイプが自動的に設定されるため、Content-Type ヘッダーを指定する必要はありません。

3. FormData からの URLSearchParams:

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

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

このオプションを使用すると、FormData オブジェクトを直接渡して URLSearchParams オブジェクトを作成できます。ただし、ブラウザのサポートが制限されている場合があるため、使用する前に必ず十分にテストしてください。