Fetch API를 사용하여 양식 데이터를 보내는 방법: Multipart/form-data와 Application/x-www-form-urlencoded?

Fetch API를 사용하여 양식 데이터 보내기

배경

Fetch API를 사용하여 양식 데이터를 보낼 때 다음과 같은 상황이 자주 발생합니다. 데이터를 인코딩할 때 사용되는 콘텐츠 유형 및 경계와 관련된 문제입니다. 이 문서에서는 이러한 문제의 본질을 살펴보고 multipart/form-data와 application/x-www-form-urlencoded 인코딩에 대한 솔루션을 제공합니다.

FormData 및 multipart/form-data

MDN의 FormData 문서에서 언급했듯이 FormData는 암시적으로 multipart/form-data 형식으로 데이터를 인코딩합니다. 이 형식은 content-Type이 application/x-www-form-urlencoded인 데이터를 전송하는 데 적합하지 않습니다.

application/x-www-form-urlencoded용 솔루션

application/x-www-form-urlencoded 형식으로 데이터를 인코딩하려면 다음 두 가지 옵션이 있습니다.

1. 문자열 인코딩: 양식 데이터를 URL 인코딩 형식으로 수동으로 인코딩합니다. string.
2. URLSearchParams: URLSearchParams 객체를 초기화하고 각 양식 필드의 이름과 값을 추가합니다. 브라우저가 URLSearchParams 개체에서 헤더를 유추하므로 Content-Type 헤더를 명시적으로 지정하지 마세요.

URLSearchParams의 대안

실험적 지원이 가능한 경우, 값을 수동으로 추가하는 대신 FormData 개체를 URLSearchParams에 직접 전달할 수도 있습니다. 이 접근 방식은 아직 개발 중이므로 구현하기 전에 철저히 테스트해야 합니다.

결론

FormData의 메커니즘과 Fetch API의 동작을 이해함으로써 개발자는 양식을 보낼 수 있습니다. multipart/form-data 또는 application/x-www-form-urlencoded 형식으로 데이터를 올바르게 전송하여 서버 측에서 적절한 데이터 전송 및 처리를 보장합니다.

위 내용은 Fetch API를 사용하여 양식 데이터를 보내는 방법: Multipart/form-data와 Application/x-www-form-urlencoded?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!