파일이 전부 1KB로 받아지는 오류(서버 인증)

제작 중인 클라우드에 올려둔 파일을 다시 다운로드 했을 때 1KB의 파일만 받아지고, 내용은 보이지 않는 문제가 발생했다.

기존까지는 원본대로 다운로드 되었는데 코드를 대거 정리하면서 한 번 꼬인 것 같다. 

 

 

다운 받은 모든 파일이 1KB인 것을 볼 수 있다.

원본 사진 파일은 403KB 정도로, 확실하게 다른 파일을 받고 있다. txt로 바꿔 확인해보니 아래와 같은 메세지가 뜬다.

 

{"detail":"Authentication credentials were not provided."}

 

서버에서 인증 관련 오류가 생겼을 거라는 판단 하에, download 관련 기능이 구현된 액션 코드를 열어 보았다.

 

---

💡fetch를 axios.get 형식으로 변경

        fetch(response.data.download_url)
          .then((response) => response.blob())
          .then((blob) => {
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
          });

        return { type: 'single', fileId: fileIds[0], filename };

왜인지 다운로드 액션에서 fetch로 받아오고 있는 것을 확인했다. 

fetch로 받아올 시 blob 처리를 해줘도 따로 인증 정보를 같이 보네지 않으면 서버에서는 인증이 되지 않았다고 생각하고 에러를 표시하는 JSON을 반환하게 된다. 

 

여기서 blob는 서버에서 파일을 보내줬을 시, 일반 문자열 text나 JSON으로 받지 않고 Raw binary 데이터로 받게 한다. 이후 데이터를 Blob 객체로 포장한 뒤 다운로드 가능하게 만들어준다. 즉 파일을 다룰 때는 깨지지 않도록 blob 처리를 해주어야 한다.

 

그러나 이렇게 처리를 해도 서버에서 제대로 인증이 되지 않으면 403 에러를 뜻하는 JSON만 반환한다. fetch() 요청에는 인증 정보가 들어가지 않는다. 기본적으로 쿠키와 헤더 같은 인증 정보를 전송하지 않기 때문이다. axios를 쓰지 않겠다면 fetch에 헤더로 토큰을 같이 보내주면 되지만, 어차피 프로젝트의 다른 곳에서 axios를 쓰고 있기 때문에 axios를 써서 형식을 통일하기로 했다.

이때 responseType는 blob로 따로 지정해주었다.

} else if (response.data.download_url) {
  let filename = response.data.filename || 'download';
  const blobResponse = await axiosInstance.get(response.data.download_url, {
    responseType: 'blob'
  });

  const blob = blobResponse.data;
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  window.URL.revokeObjectURL(url);
  document.body.removeChild(a);

  return { type: 'single', fileId: fileIds[0], filename };
}

 

드디어 파일이 원본 그대로 받아오는 것을 볼 수 있었다. 2개 이상의 파일을 압축하여 받아도 전과 달리 에러가 나거나 빈 파일이 넘어오지 않는다. fetch를 잘못 사용하고 있어서 사용자 권한 인증이 되지 않은 상황이었다고 정리할 수 있겠다.