Angular.js 로 구성된 v1 프로젝트를 진행하던 중 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
});

이렇게 처리하니 잘됨ㅎ