🚨 Axios Network Error 오류 해결 삽질기... 🚨

🎯 개요

비교적 순조롭...게 프로젝트 코딩을 하고 있었는데 화요일에 마치 자만하지 말라는듯이 Axios network error가 나타났다. 이미지 업로드 기능을 구현할 때였다. 우리 로직은 프론트 쪽에서 파일명을 서버에 보내주면, 서버가 S3에 pre-signed url을 요청하고, 거기서 받아온 pre-signed url을 다시 프론트에 반환해주어서 프론트가 그 url에 바로 이미지 put 요청을 보내는 로직이다. 그런데 pre-signed url을 받아오는 것까지는 잘했는데 프론트 쪽에서 그 url에 put 요청을 보내려고 하니까 이런 오류가 발생했다. 십수가지 정도 방법을 시도해 봤는데 해결이 안 되어서 블로그에 오류 해결 삽질기라도 정리해 보려고 한다:) 쉽게만 살아가면 재미없어 빙고 ㅋ

🎯 기존 로직

axios.put(res.data.preSignedUrl, photo)
  .then((res) => {
  console.log(res);
}).catch((err) => {
  console.error(err);
})

맨 처음에 작성했던 코드는 이거였다. 레퍼 여러 개 찾아봤는데 다들 코드가 비슷비슷하고 어려울 거 없는 코드라 이렇게 작성했는데 오류가 날 줄은...

pre-signed url은 콘솔에 찍어 보면 이런 식으로 잘 뜬다.

photo 파일 변수도 콘솔에 찍어보면 이런 식으로... 잘 뜬다.

근데 요청을 보내보면 axios network error가 뜬다ㅎㅎ 이미 여러 방법을 시도해 보았고 다 성공하지 못 했지만 블로그에 정리하는 김에 1부터 다시 시도해보려고 한다...

💡 방법 1 : Content-type 지정

오류가 발생한 요청의 헤더를 보면 Content-Type이 application/x-www-form-urlencoded로 되어 있다. Content-Type은 보내는 자원의 타입을 명시하는 부분인데, 내 파일의 타입은 image/png인데 이 타입을 따로 명시해주지 않아 application/x-www-form-unlencoded로 보내져서 생기는 오류인가 싶었다. (물론 확실하지 않다...)

axios.put(res.data.preSignedUrl, photo, {
  headers: {
    "Content-Type": photo.type
  }
})
  .then((res) => {
  console.log(res);
}).catch((err) => {
  console.error(err);
})

그래서 안전하게 Content-type을 해당 photo의 타입으로 지정하여 보내보았다.

하지만 이 부분이 같아도 여전히 오류가 발생한다. 타입을 명시적으로 image/png나 image/* 등으로 지정해도 결과는 같았다.

💡 방법 2 : fetch 메소드로 변경

reactjs - Axios AWS S3 Put Object: Error: Network Error

나랑 거의 비슷한 문제를 가지고 있는 사람을 stackoverflow에서 찾았는데 유의미한 답변은 없는 것 같았다... 이유는 잘 모르겠지만 axios를 fetch로 바꿔서 된다는 사람이 있길래 나도 시도해 보았다. 실제로 axios가 아무리 fetch 기반으로 돌아간다지만 내부 로직이 다른 점이 많아서 나도 예전에 axios를 fetch로 바꾸기만 했더니 문제가 해결된 적이 있었다. 그래서 좀 기대를 가지고 시도한 방법이었는데,,,

fetch(res.data.preSignedUrl, {
  'body': photo,
  'method': 'PUT',
  'headers': {
    "Content-Type": "image/*",
  }
}).then((res) => {
  console.log(res);
}).catch((err) => {
  console.error(err);
})

fetch 메소드는 더 불친절한 이런 오류가 뜬다... Content-type을 photo.type으로 바꿔본다든지, 주석 처리 해 본다든지 등등을 시도해 보아도 결과는 같다.

💡 방법 3 : 로컬 서버 껐다 켜 보기

안 된다 😎 뇌가 약간 녹아서 vscode 껐다 켜 보기, 컴퓨터 껐다 켜 보기 이런 원시적인 방법까지 다 해 봤는데 안 됨ㅋ

💡 방법 4 : FormData로 보내기

사실 이 방법은 아닐 것 같았는데... 지푸라기라도 잡는 심정으로 시도해 보았다.

const formData = new FormData();
formData.append(photo.name, photo);
axios.put(res.data.preSignedUrl, formData, {
  headers: {
    "Content-Type": "multipart/form-data",
  }
})
  .then((res) => {
  console.log(res);
}).catch((err) => {
  console.error(err);
})

역시 되지는 않았다ㅎㅎ

const formData = new FormData();
formData.append('file', photo);
axios.put(res.data.preSignedUrl, formData, {
  headers: {
    "Content-Type": "multipart/form-data",
  }
})
  .then((res) => {
  console.log(res);
}).catch((err) => {
  console.error(err);
})

key 이름을 file로 해야 된다는 말도 있길래 해 보았는데 안 된다.
Nestjs에서 파일 업로드하는 방법 2편 - presigned url(with. presigned post)

참고로 formData가 아닌 그냥 { file: photo } 객체를 body로 넣는 것도 해 보았는데 안 되었다.

💡 방법 5 : new Request() 로직으로 수정하기

fetch로 보낼 요청을 new Request()로 생성해 보았다. 그냥 예제 코드 중에 이렇게 시도해 본 사람도 있길래 해 본 방법이고 사실 이걸로 해결될 가능성은 매우 낮았지만... (왜냐면 그냥 원래 보내던 fetch랑 똑같으니까...) 혹시나 내가 모르고 있는 부분이 있을 수도 있으니까 시도해 본 방법이다.

fetch(new Request(
  res.data.preSignedUrl, {
    method: 'PUT',
    body: photo,
    headers: new Headers({
      'Content-Type': "image/*",
    }),
  }
)).then((res) => {
  console.log(res);
}).catch((err) => {
  console.error(err);
})

역시 안 된다 키킼 근데 순간 response가 좀 느리게 와서 된 줄 알고 깜짝 놀람 ㅋㅋ

💡 방법 6 : Binary 파일로 전송

백엔드에서 postman으로 테스트할 때는 잘 보내지길래 봐봤는데 binary 형태로 보내고 있길래 binary로 변환해서 보내보는 방법도 시도해 보았다... 사실 그냥 File 객체째로 보내면 되는 거 아닌가 싶긴 한데 자동으로 설정되는 Content-Type은 x-www-form-urlencoded길래 혹시나 해서...

function readFileAsBinary(file: File) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.onload = () => {
      const arrayBuffer = reader.result;
      resolve(arrayBuffer);
    };

    reader.onerror = reject;

    reader.readAsArrayBuffer(file);
  });
}
...
readFileAsBinary(photo)
  .then((response) => {
  axios.put(res.data.preSignedUrl, response)
    .then((res) => {
    console.log(res);
  }).catch((err) => {
    console.error(err);
  })
...

하지만 역시 똑같은 오류가 발생했다...

readFileAsBinary(photo)
  .then((response) => {
  axios.put(res.data.preSignedUrl, response, {
    headers: {
      "Content-Type": 'application/octet-stream'
    }
  })
    .then((res) => {
    console.log(res);
  }).catch((err) => {
    console.error(err);
  })

혹시 Content-Type을 application/octet-stream으로 지정해줘 보면 어떨까 싶어서 지정해 봤는데 해결되지는 않았다 ㅎㅎ

💡 방법 7 : 파일 확장자 바꿔보기

png 파일로만 테스트 해 보았는데 혹시 다른 확장자(jpg 등등...) 파일로 하면 될까 싶어서 시도해 보았다... 근데 서버 쪽에서도 png 파일로 테스트했고 성공했어서 이건 아닌 것 같지만 그래도...

예전에 컨퍼런스 가서 찍었던 사진으로 해 보았는데 안 된다 ㅎㅎ

💡 방법 8 : http로 요청

pre-signed url은 https로 되어 있고, 나는 내 로컬에서 요청을 보내기 때문에 http로 되어 있다. 혹시 이게 달라서 문제인가 싶어서 pre-signed url을 http로 바꾸어서 요청해 보았다. 바꿨더니 됐다는 사람을 발견해서 희망을 가지고 시도해 보았다. 참고한 링크는 여기였다.

const link = (res.data.preSignedUrl).replace(/https/, 'http');

axios.put(link, photo, {
  headers: {
    "Content-Type": photo.type
  }
}).then((res) => {
  console.log(res);
}).catch((err) => {
  console.error(err);
})

나는 바꿔도 안 되는 사람이었다.

💡 방법 9 : 쉬었다가 다시 하기

ㅌㅋㅋ
ㅋㅋㅋㅋㅋㅋ
화요일부터 이것 때문에 미치겟다
자려고 누웠다가도 이건가? 싶으면 다시 일어나서 코드 치고 이랬는데
이렇게 며칠동안 해결 안 되는 오류 너무 오랜만에 만나서 멘탈이 약해졌다...
런칭 기간이 얼마 남지 않아서 이 문제는 나중에 다시 해결해 볼 수밖에 없을 것 같다.
뼈아프지만 요즘 자만했는데 아직 멀었다는 걸 알게 해 준 좋은 경험이었다. ^^