Vue에서 카카오맵 api 요청 시 401 Unauthorized 에러

JavaScript
1

vue는 카카오맵 요청 부분 따로 컴포넌트로 빼서 라우터 등록하고 접속 시에는 http://localhost:8080/map으로 접속하구요

플랫폼 → Web에서 사이트 도메인도 등록 했고 key도 앱 키에서 JavaScript 키 복사해서 코드에 넣어줬는데도 401 에러가 뜨네요

vue에서 서버 돌리면 http://localhost:8080으로 나오길래 사이트 도메인 http://localhost:8080으로 등록 했는데 혹시 이게 잘못 됐나 싶어서 http://ip주소:8080도 등록해봤고 고급 설정에서 허용 IP 주소에도 다 등록해봤는데도 안 되네요 key 값도 확실히 맞구요

혹시나해서 다른 브라우저는 되나 궁금해서 edge해서 접속해봤는데 여기선 또 됩니다 근데 edge만 됩니다 크롬, 삼성 인터넷(모바일)에선 401 에러 나와요

도무지 모르겠어서 질문 올려봅니다 답변 주시면 감사하겠습니다 vue 코드도 첨부합니다 (key 값은 가렸어요)

<template>
<div>
    <h1>카카오맵 테스트</h1>
    <div id="map"></div>
</div>
</template>

<script>
export default {
    data(){
        return {
            map: null,
        }
    },
    methods: {
        initMap() {
            const container = document.getElementById("map");
            const options = {
                center: new kakao.maps.LatLng(37.2429362, 131.8624647, 16),
                level: 5,
            };
            this.map = new kakao.maps.Map(container, options);
        }
    },
    mounted() {
        if(!window.kakao || !window.kakao.maps){
            const script = document.createElement("script");
            script.src = 
                "//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=죄송합니다. key값 비공개 이해부탁드립니다.";

            /* global kakao */
            script.addEventListener("load", () => {
                kakao.maps.load(this.initMap);
            });

            document.head.appendChild(script);
        }else {
            console.log("이미 로딩됨 ", window.kakao);
            this.initMap();
        }
    }
}
</script>

<style>
    #map{
        width: 400px;
        height: 400px;
    }
</style>
2

// 해결했습니다.

크롬에서는 애드블록 스텔스모드가 원인이었고 모바일 삼성 인터넷 브라우저에서는 localhost가 아닌 ip주소로 접속해서 되지 않았던 거라 사이트 도메인에 추가 등록해서 해결했습니다.

1개의 좋아요