[kakaoMap & javascript] 카카오 지도 연결했는데 크로스도메인 오류 날때 This request has been blocked; the content must be served over HTTPS.

상황

로컬에서는 잘 됐었는데 firebase로 배포한 후 카카오 developer 페이지에서 사이트 도메인 설정도 해줬는데 갑자기 안나던 크로스 도메인 이슈가 났다.

 

해결

head태그에 넣는 카카오 맵 url에 잎에 있는 http를 삭제하고 //로 시작하게 만든다.

//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=개인API키

전체코드

<template>
    <section class="fb__map">
        <h2 class="fb__title--hidden">지도 페이지</h2>
        <SearchComponent></SearchComponent>
        <div ref="lunchMap" class="fb__map__container"></div>
    </section>
</template>

<script>
import { ref, onMounted } from "vue";
import SearchComponent from "../components/SearchComponent";

export default {
    components: {
        SearchComponent
    },
    setup() {
        const lunchMap = ref(null);

        const initMap = () => {
            const container = lunchMap.value;
            const markerPosition = new kakao.maps.LatLng(35.19656853772262, 129.0807270648317);
            
            const map = new kakao.maps.Map(container, {
                center: markerPosition,
                level: 3
            })

            const marker = new kakao.maps.Marker({
                position: markerPosition
            });

            marker.setMap(map)
        }

        onMounted(() => {
            if (window.kakao && window.kakao.maps) {
                initMap();
            }   
            else {
                const script = document.createElement('script')
                script.onload = () => kakao.maps.load(initMap);
                script.src = '//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=개인API키'
                document.head.appendChild(script)
            }
        })

        return {
            lunchMap
        }
        
    }
}
</script>

 

참고

만약 아래와 같은 오류가 난다면 지도를 넣을 요소를 잘 찾는지 확인하면 된다. (ref(null) 로 불러와서는 value를 안쓴다거나 보통 찍어보면 못찾는다고 나온다. )

’Cannot read property ‘defaultView’ of undefined’