axios get으로 api 호출했는데 response data 깨지는 현상 header 추가

최근 포트폴리오 웹사이트를 만드는 중 문제가 생겨 애를 먹었습니다.

 

제가 운영하는 유튜브 채널의 데이터를 받아오기 위해 axios를 사용하는데 

이렇게 정상적으로 글자가 나오지 않고

위 사진처럼 글자가 깨지는 현상이 있었습니다.

status나 statusText,headers 등 대체적으로 모든 데이터가 제대로 들어왔으나 정작 중요한 response.data는 깨짐현상이 발생했습니다.

 

axios가 아닌 fetch를 써도 정상적인 데이터가 나오지 않았습니다.

 

구글에 한글로 문제를 검색해도 한글 깨짐현상만 나올 뿐 근본적인 해결책을 찾지 못했습니다.

 

하지만 영어로 검색하니 바로 해결책이 나오더군요.

Error response data nodejs · Issue #5298 · axios/axios

 

 

const header: AxiosRequestConfig<any> = {
  headers: { Accept: "application/json", "Accept-Encoding": "identity" },
};

const res = await axios.get(`url`,header);

위처럼 headers 값에  "Accept-Encoding": "identity"를 추가 했더니 올바른 데이터가 출력됐습니다.

Accept-Encoding - HTTP | MDN

 

mdn을 요약하자면 서버에게 압축하지 않은 데이터로 받겠다고 요청하는 것이라고 합니다.

 

유튜브에서 api를 호출하게 될 경우 데이터양이 너무 방대해질 것을 우려해 압축한 상태로 데이터를 보내주는 것 같습니다.