문제인식

axios로 api를 통해 바이너리 파일을 다운로드 하는데 다운로드 한 결과가 용량이 이상하고 제대로 열리지 않았다. 서버에서 전송전 최종 작성한 파일은 정상적이었고, 포스트맨으로 다운로드 받을 경우에도 정상적이었다.

해결방법

axios 옵션에서 responseType: "blob"을 설정해 주어야 한다.

const config = {
    method: "POST",
    url: url,
    headers: {
    Authorization: tokenType + " " + accessToken,
        ContentType: "application/json",
    },
    responseType: "blob",
    data: data,
};
const response = await axios(config);
const name = response.headers["content-disposition"]
    .split("filename=")[1]
    .replace(/"/g, "");
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", name);
link.style.cssText = "display:none";
document.body.appendChild(link);
link.click();
link.remove();

후기

이 문제를 해결하려고 반나절을 썼다.
http 프로토콜을 공부해야겠다는 생각이 들었다.
postman에서는 responseType: "blob"을 설정하지 않고 요청을 보내더라도 응답을 제대로 받는것을 봐서는 node에서는 axios사용시 responseType: "blob"을 설정하지 않아도 되는것 같다. 아무래도 브라우저는 XMLHttpRequest를 사용하는 반면, node에서는 http를 사용하기 때문인것 같다.