개발

비동기 HTTP 요청시 FormData 에서 발생할 수 있는 문제 해결

June 25, 2025

by 에루샤

우리가 백단에 비동기요청, 그러니까 제이쿼리로 말하자면 ajax 요청을할때 다양한 데이터를 넘기기위해서 앞단에서 FormData를 통해 넘기는 경우가 있다.

그럴때 요청에서를 임의로 정해서 넘긴다면 문제가 발생할 수 있다.

일반적으로 나같은 경우에는 일반적인 백단 요청을 아래와 같은 형식으로 하곤 한다.

const response = await fetch('url', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
    },
    body: JSON.stringify({
        value: 'value',
        value2: 'value2',
    }),
});Copy

근데 만약에 넘기는 데이터가 일반적인 json 데이터나 단일 텍스트가 아니라 아래처럼 FormData라면 Content-Type을 지정하지 않아야한다.

const formData = new FormData(form); // 폼 데이터 생성
const actionUrl = form.action; // 폼의 action 속성 URL 가져오기

const response = await fetch(actionUrl, {
    method: 'POST',
    body: formData,
    headers: {
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
    },
});Copy

폼데이터는 들어있는 데이터에 맞게 브라우저가 알아서 Content-Type을 multipart/form-data; boundary=... 방식으로 정의한다고 한다.

나는 이것도 모르고 그냥 하던대로 application/json을 지정하니까 FormData의 모든정보가 유실되었던 것이다.

이 문제때문에 해당 코드로 구현되어있는 내 블로그 댓글달기기능이 무려 일주일간 비정상적으로 작동하지 않았다.

하... 정말 부끄럽다.

#문제해결 #JavaScript

0 개의 댓글