axios.get으로 엑셀 파일 받으려 할 때 파일이 깨지던 문제

axios.get 을 해 줬을 떄 엑셀파일 다운이 되긴 했는데 

파일이 손상돼서 열 수 없다는 메세지가 나왔다. 

 

해결을 위해 필요한 것을 정리 해보려 한다. 

 

1. 먼저 axios.get 요청의 헤더에 responseType : blob 을 해줘야한다. 

Blob 은 Binary Large Object 로 단순 텍스트가 아닌 이미지 , 사운드 , 동영상 등 대용량 바이너리 데이터를 담을 수 있다. 

 

 getDownloadData: async () => 
        await base.get(`${BASE_URL}/excel/download`,
        {
            responseType:'blob'
        })
    ,

get 할 주소 뒤에 객체로 헤더를 지정해줄 수 있다. 

 

responseType은 설정 해 주지 않으면 기본으로 JSON 으로 설정 되어 있다.

이 말은 axios 가 reponse 를 JSON 으로 파싱한다는 의미이다. 

 

이미지를 받아오고 싶을 때는 reponseType 를 arraybuffer 로 설정 해 주면 된다고 한다. 

const axios = require('axios');

const res = await axios.get('https://images.unsplash.com/photo-1506812574058-fc75fa93fead', {
  responseType: 'arraybuffer'
});

const fs = require('fs');
fs.writeFileSync('./south-beach.jpg', res.data);

 

2. blob 을 생성 해 response 데이터를 넣어준다. 

 

const blob = new Blob([response.data]), {
	type: "application/octet-stream"
})

 

어떤 미디어 타입을 보내주는건지 백엔드에 물어봐서 타입을 넣어줬는데 

axios 헤더에 responseType : blob 해 주니까 

blob 생성 할 때 굳이 type 을 안 넣어도 파일이 잘 다운받아진다. 

 

 

Axios parses the response based on the HTTP response's Content-Type header. When the response's content type is application/json, Axios will automatically try to parse the response into a JavaScript object.

 

axios 는 response 의 Content-Type header 에 따라 response를 파싱한다고 한다. 

response 의 content type 이 application/json 일 때 Axios 는 자동적으로 response 를 JS Object 로 파싱한다. 

 

 

참조

https://masteringjs.io/tutorials/axios/response-body

Get the HTTP Response Body with Axios