ajax로 formdata를 보낼 때 유의사항

분명 formData.append 로 값을 넣어서 보냈는데 서버에서 디버깅 했을 때 null을 받아서 400 에러가 떨어졌다.

이유를 찾아보니 파일을 업로드하기 위해 AJAX로 FormData 게시 요청을 보낼 때 processData 및 contentType 속성을 false로 설정해야 한다.

AJAX의 기본 동작은 데이터를 문자열로 처리하고 콘텐츠 유형을 "application/x-www-form-urlencoded"로 설정한다.

그러나 보낼 때 FormData를 사용하는 파일의 경우 데이터가 문자열로 처리되는 것을 막아야한다. 이 경우 파일이 손상될 수 있고 데이터가 원시 바이너리 데이터로 전송되어야하는 경우다.

따라서 processData를 false로 설정하면 jQuery가 데이터를 처리하지 않고 그대로 둔다.

원시 이진 데이터로. contentType을 false로 설정하면 jQuery가 콘텐츠 유형 헤더를 설정하지 않고 브라우저가 적절한 콘텐츠 유형을 자동으로 설정한다.

const api = (method, url, formData?) => $.ajax({
    url,
    method,
    processData: false,
    contentType: false,
    data: formData
});

이렇게 처리하니 잘됨…ㅎ;