[트러블슈팅] 카카오맵 401 Unauthorized 에러 (kakao is not defined)

현재 진행중인 프로젝트에서 문제가 발생했다. 크롬의 주소창에선 같은 url임에도 불구하고 한 쪽에서만 클라이언트측 에러가 발생하는 것이었다.

 

해당 페이지는 임시로 만들어놓은 랜딩 페이지였기 때문에 보잘 것 없는 에러문을 출력했다. 반드시 에러 페이지는 커스터마이징해야한다!

정상적으로 렌더링

 

개발자 도구에서 문제의 원인을 찾을 수 있었다. 카카오맵 sdk에서 401에러가 발생함에 따라 지도를 띄워주는 컴포넌트에서 "kakao is not defined"라는 에러를 발생시켰다.

 

 

문제의 원인은 금방 찾을 수 있었다. 결론만 말하자면, 카카오 개발자 센터에서 사이트 도메인에 제대로 도메인을 등록하지 않은 것이 문제였다.

 

하위 도메인만 등록되어 있다

크롬의 주소창에선 동일해보였으나, 주소를 복사해보니 문제가 발생한 uri는 <domain>/products/3이였고, 정상적으로 동작하는 uri는 www.<domain>/products/3이었다. 카카오 개발자 센터에서 사이트 도메인에 www.<domain>이라는 하위 도메인만 등록했으니 당연하게도 401 에러가 발생한 것이었다. 

 

다음과 같이 도메인을 추가해주면 해결된다.

 

도메인을 추가해준다

AWS에서 기존 <domain>이라는 도메인은 www.<domain>이라는 하위 도메인으로 리다이렉션이 되도록 세팅해놨는데, 하위 경로에서 이것이 되지 않았다. 이 부분도 함께 수정해야겠다.