[React Native] axios로 formData 전송이 안되는 문제

보통 react native에서 axios로 formData를 보내려고 하면 아래와 같이 headers에 'content-type'을 'multipart/form-data'로 설정합니다.

 

  const body = new FormData();
  body.append('email', 'test');
  body.append('password', 'test');

  const response = await myAxios.post('/auth/sign-up', body, {
    headers: { 'content-type': 'multipart/form-data' },
  });

 

하지만 서버측 처리에 따라 위와 같이 하는 경우 에러가 발생할 수 있습니다.

 

axios가 formData를 전송할 때 문자열로 바꿔버리기 때문인데,

 

transformRequest를 명시해주면 전송할 때 데이터를 어떻게 처리할지 정해줄 수 있습니다.

 

아래처럼 request data를 그대로 리턴하게 하면 문제가 해결됩니다.

 

  const body = new FormData();
  body.append('email', 'test');
  body.append('password', 'test');

  const response = await myAxios.post('/auth/sign-up', body, {
    headers: { 'content-type': 'multipart/form-data' },
    transformRequest: (data, headers) => {
      return data;
    },
  });