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

URLSearchParams를 사용할 때는 Content-Type 헤더를 지정할 필요가 없습니다. 올바른 콘텐츠 유형이 자동으로 설정되기 때문입니다.

3. FormData의 URLSearchParams:

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

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

이 옵션을 사용하면 FormData 개체를 직접 전달하여 URLSearchParams 개체를 만들 수 있습니다. 다만, 브라우저 지원이 제한적일 수 있으므로, 사용 전 반드시 철저한 테스트를 하시기 바랍니다.