🧑‍💻개발/라이브러리

[API 오류] 카카오 지도 간단하게 오류 해결 방법(VScode 라이브서버)

무택 2023. 7. 3.

 

 

 

[API]카카오 지도를 간편하게 불러오는 방법

안녕하세요 무택입니다 :) 오늘은 카카오 지도를 불러오는 방법에 대해 써보려고 합니다. 웹사이트를 구현하다 보면 지도 기능이 필요한 경우가 생기는데 보통 구현하기 힘들 경우 이미지로 대

mu08.tistory.com

위 링크에서 카카오 맵을 어떻게 등록하는지 알 수 있습니다.

 


 

 

안녕하세요 무택입니다.

오늘은 VScode에서 카카오 지도를 라이브서버로 테스트해보려고 할 때 안 나오는 오류에 대해서 써보려고 합니다. 지도를 등록하는 과정에서 도메인 입력을 실수했을 때 일어나는 오류인데 아래 내용을 확인해서 수정해 보시길 바랍니다.

 

 

카카오 지도 401 에러 해결 방법

카카오 401오류 이미지

위와 같이 "Failed to load resource: the server responded with a status of 401 (Unauthorized)" 에러 메시지가 뜨는 경우가 있습니다. 이 경우는 도메인 입력을 제대로 안 했을 경우에 생기는 오류로 카카오 개발자 사이트에서 도메인을 수정해줘야 합니다.

 

 

해결방법

1. 카카오 개발자 사이트에 들어가서 등록하려는 플랫폼을 눌러줍니다.

 

 

카카오 401오류 이미지

2. 이곳에 도메인이 제대로 등록되어 있는지 확인해 줍니다. 

여기서 제가 겪은 오류는 서치 하다 보니 보통 라이브서버 테스트할 때 "http://localhost:8800"로 등록을 한다고 해서 그대로 등록했는데 이게 문제였습니다. VScode 라이브서버에서 테스트하기 위해서는 "http://127.0.0.1:5500"로 등록을 해줘야 지도가 불러와지게 됩니다.

 

저와 같은 문제를 겪으신 분들은 도메인명이 잘못되진 않았는지 확인해 보고 오류를 해결했으면 좋겠습니다.