오픈 API를 사용해서 get으로 요청을 보내야 되는 일이 있어서 평소와 같이 axios를 사용했다. (혹시나 axios를 모른다면 이 가이드를 봐주시오!) 그냥 평소 같이 사용했는데 이상하게 자꾸 응답으로 401 Unauthorized 에러가 났다. 그래서 알아본 axios 잘 다루는 법!
원래의 에러코드
나는 다음 검색 API 중 책 검색 API를 사용하고 있었다. 그런데 Authorization: kakaoKey 부분에 알맞은 값을 넣어도 자꾸 401 Unauthorized가 떴다. 🥺
axios.get()
const search = () => {
axios.get('https://dapi.kakao.com/v3/search/book?target=title',
{ headers:{ Authorization: kakaoKey }, },
{ params:{ query: props.bookTitle },
}).then(function (data) {
console.log(data)
}).catch(function (error) {
console.log(error)
})
};
뭔가 이상함을 느끼며 혹시 나의 key 값이 잘못된 값인지 확인하기 위해 postman으로 테스트 해보니 잘돼서 일단 key 값 잘못은 아니라고 판단하고 내 코드를 꼬라봤다.
원인 파악을 위한 구글링
일단 쉽게 눈치 챌 수 있는 건, Authorization: kakaoKey 에러가 났다는 것은 인증 정보가 유효하지 않다는 거고, 난 이 정보를 headers에 보내고 있으므로 헤더에서 문제가 생긴 것이다.
그래서 일단 문제의 원인을 파악하기 위해 열심히 구글링을 했는데, 나와 비슷한 문제를 겪는 사람들을 많이 볼 수 있었다. 그리고 문제의 원인이 CORS 때문임을 알아차릴 수 있었다.
CORS: 교차 출처 리소스 공유 (Cross-origin resource sharing)
프론트 개발을 하다 보면 이 오류를 꽤 자주 만나는데, 이 경우는 CORS 때문에 헤더에 접근하기 어려워 생긴 일이었다.
CORS 이슈 해결법
백엔드와의 통신을 위한 해결법이라면 백엔드에서 보통 수정을 해주는데, 이 경우는 내가 해내야 하므로 프론트에서 알아서 원만하게 합의를 봐야 한다.
axios.create()
초심으로 돌아가자 싶어서 axios 공식 가이드의 목차를 보는데 Config 기본 설정 카테고리가 있었다. 삘이 짜르르 왔다. axios.create()를 사용하여 나의 axios에 먼저 headers를 설정해주고 get을 보내면 될 거 같은데...!
const search = (keyword) => {
return axios.create({
baseURL: "https://dapi.kakao.com/v3/search/book?target=title",
headers: { Authorization: kakaoKey },
params: { query: keyword }
});
}
async function bookSearch () {
try {
const res = await search(props.bookTitle).get();
console.log(res.data);
} catch (error) {
console.log(error);
}
}그리고 위 코드로 하니 요청도 잘 보내지고 응답도 잘 돌아왔다. 간단하지만 돌고 돌아 해결해서 꽤 시간이 걸렸다... 흑. 누군가에게는 도움이 되길 바라며 포스팅을 마친다.
레퍼런스
