Axios 버전 문제로 인한 FormData 인식 실패: 해결 방법

서론

웹 개발 과정에서 클라이언트와 서버 간의 데이터 교환은 필수적인 과정입니다. 특히, 파일 업로드나 여러 데이터를 동시에 전송해야 할 때, FormData를 사용하는 것이 일반적입니다. FormData는 폼 데이터를 쉽게 생성하고, 서버로 전송할 수 있는 메커니즘을 제공합니다. JavaScript에서는 주로 fetch나 Axios 같은 라이브러리를 통해 이를 처리합니다.

그러나, 최근 몇몇 프로젝트에서 Axios를 사용할 때 특정 버전에서 FormData가 제대로 인식되지 않는 문제가 보고되었습니다. 이는 개발자들 사이에서 상당한 혼란을 야기했고, 데이터가 서버로 제대로 전송되지 않아 여러 기능의 실패로 이어졌습니다.

이 블로그 포스트에서는 Axios 버전 문제로 인해 발생하는 FormData 인식 실패 문제의 원인을 파악하고, 몇 가지 해결 방안을 제시하고자 합니다.

문제의 원인

FormData 인식 실패 문제는 주로 Axios의 특정 버전에서 발생합니다. Axios는 HTTP 요청을 보낼 때 내부적으로 요청 데이터를 처리하고, 이 과정에서 FormData 객체를 올바르게 인식하지 못하는 경우가 있습니다. 특히, Content-Type 헤더가 자동으로 설정되지 않아, 서버가 요청을 multipart/form-data로 올바르게 인식하지 못하는 것이 일반적인 원인 중 하나입니다.

해결 방안

Axios 버전 업데이트

첫 번째 해결 방안은 Axios를 최신 버전으로 업데이트하는 것입니다. 버전 업데이트를 통해 FormData와 관련된 버그가 수정된 경우가 많습니다. 다음 명령어를 사용하여 업데이트할 수 있습니다.

npm install axios@latest

Content-Type 헤더 명시적 설정

Axios에서 FormData를 사용할 때, 명시적으로 Content-Type 헤더를 설정하지 않는 경우가 있습니다. 이를 해결하기 위해, 요청을 보낼 때 헤더에 Content-Type을 multipart/form-data로 명시적으로 설정해주는 것이 좋습니다.

const formData = new FormData(); 
formData.append("file", file);

axios.post('/upload', formData, { 
    headers: { 
        'Content-Type': 'multipart/form-data' 
    }
 });

Axios 인스턴스의 transformRequest 사용

또 다른 방법으로, Axios 인스턴스를 생성할 때 transformRequest 옵션을 사용하여 요청 데이터를 조작할 수 있습니다. 이 방법을 통해 FormData가 서버로 올바르게 전송될 수 있도록 할 수 있습니다.

const axiosInstance = axios.create({
  transformRequest: [(data, headers) => {
    // FormData 인스턴스를 올바르게 처리
    if (data instanceof FormData) {
      Object.assign(headers, data.getHeaders());
      return data.getBuffer();
    }
    return data;
  }],
});

Cyber_