[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610
APP ID : 1029052
지도는 정상적으로 잘 뜨는데
주소 검색 시 화면에 나온것 처럼 에러가 납니다.
혹시 해결방법이 있을까요?
캐시도 지워봤고 크롬, 엣지 동일현상입니다.
request Header 전문이 필요합니다.
address.json과 같은 API는 헤더에 키값을 실어서 보내는데; 그게 잘못셋팅되서 안되서 발생하는 이슈 같이 보이기도 합니다.
request header 의 Authorization 부분을 확인해 보시면 좋을 것 같습니다.
지도 JS API의 Service.라이브러리의 Geocoder를 이용하면 자동으로 처리가 되긴한데; 현재는 어떻게 작성되었는지 알 수가 없습니다.
일단 해당오류는 CORS오류이고, 이는 address.json API에서 인증헤더를 통해 인증이 되야 정상적인 응답헤더가 내려갈거에요.
지금은 전체적인 헤더를 볼 수 없어서 확인이 어렵습니다.
사용방법과, request헤더 전문을 올려주시기 바랍니다. 만약 인증키가 들어있다면 그부분은 블러처리해서 올려주시면 됩니다.
현재 터널링 API를 사용하고 계시는데
혹시 인트라넷 환경이실까요?
기본적으로 터널링 API를 사용하시면 특정 도메인으로 랩핑이 되는데,
지도 타일을 비롯하여 기본적인 지도 기능은 해당 도메인으로 묶입니다.
헤더에 값도 넘어가고 하는데 응답이 안오는건 내부망이라 그렇게 된것으로 보이긴 합니다.
한번 지도 SDK를 받는 도메인과, addressSearch를 했을때의 보내는 서버 도메인의 IP를 체크해 보시면 좋을 것 같습니다.
SDK를 받는 도메인과 addressSearch를 했을때 보내는 서버 도메인은 요청 도메인 IP 말씀하신건가요? 아니면 응답해주는 카카오쪽 IP 말씀하신건가요??
혹시 IP가 서로 다르다면 어떤 해결방법이 있을까요?..
서로 IP가 다르다면 그 IP를 모두 풀어주셔야 될것 같습니다.
최초에 지도 SDK를 이용하실때 방화벽작업을 하셨던 것처럼, addressSearch를 할때 응답오는 remote IP들도 작업이 필요할 듯 합니다.
즉 내부망이라 네트워크 이슈가 아닐까 합니다.
addressSearch 를 할 때 응답오는 IP를 확인하는 방법이 있을까요?
일단 사용하는 곳이 스쿨넷망이라 외부 서버 접속이 가능하다고 하여
터널링으로 호출하던 것을 바꿔서 시도했는데도 같은 에러가 발생하네요…
안녕하세요~
일단 해당 정보로는 정확히 어떤 이슈인지 확인이 어렵네요.
혹시 dapi.kakao.com 을 호출하는 코드 부분 제공이 되실까요?
또는 외부망이 접근 가능하다면, 혹시 저희가 확인할 수 있는 URL을 받을 수 있을까요?
보통 REST API 콜이 안되는 현상은
script태그에 crossorigin 속성이 붙어 있거나,
file:// 으로, html파일을 웹서버를 통해서 오픈한게 아닌, 더블클릭해서 파일로 실행했을때 발생하긴 합니다.
외부망 접속 가능한데;; 해당이슈를 재현을 할 수가 없어서,
혹시 지도 SDK를 어떤 URL을 쓰는지 확인 가능할까요?
외부에서의 접근은 불가능한 사이트 입니다.
지도 API를 사용하는 클라이언트의 PC가 외부망이 접근 가능한 PC라서 터널링 없이도 API 사용 가능하다는 말이었습니다.
https://www.school-net.or.kr/enis/guide/schoolnet/offeringService.jsp
위 링크에서 스쿨넷망 참고 가능합니다.
일단 dapi.kakao.com 을 호출하는 코드부분은 문제가 없을것이라고 예상이 되는게, 저 사이트를 제가 개발하는 곳에서 접속을 하면 기능이 정상작동 됩니다.
근데 지금 저렇게 오류가나는곳은 학교 스쿨넷망을 사용하는 저희 고객 PC에서만 오류가 나고 있습니다…
저희 고객이 저 사이트를 접속할때 인증서를 통해 로그인을 하는데 그게 문제가 있을까요?
일단 간단하게 코드도 기재하겠습니다.
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=*&libraries=services"></script>
<script type="text/javascript">
var lat;
var lot;
var imageSrc;
var markerImage;
$(function(){
lat = '${hgInfo.LAT}';
lot = '${hgInfo.LOT}';
var mapContainer = document.getElementById("baseMap"),
mapOption = {
center:new kakao.maps.LatLng(lat,lot),
draggable:true,
level:4
};
var baseMap = new kakao.maps.Map(mapContainer, mapOption);
//마커
if("${hgInfo.SCHUL_CRSE_SC_CODE_COLOR}"=="02"){
imageSrc = '/images/new/mapinfo/point_ele.png';
}else if("${hgInfo.SCHUL_CRSE_SC_CODE_COLOR}"=="03"){
imageSrc = '/images/new/mapinfo/point_mid.png';
}else if("${hgInfo.SCHUL_CRSE_SC_CODE_COLOR}"=="04"){
imageSrc = '/images/new/mapinfo/point_hig.png';
}else if("${hgInfo.SCHUL_CRSE_SC_CODE_COLOR}"=="05"){
imageSrc = '/images/new/mapinfo/point_special.png';
}else{
imageSrc = '/images/new/mapinfo/point_ele.png';
}
var coords = new kakao.maps.LatLng(lat,lot);
markerImage = new kakao.maps.MarkerImage(imageSrc, new kakao.maps.Size(31, 35), new kakao.maps.Point(13, 34));
var marker = new kakao.maps.Marker({position: coords, image: markerImage });
marker.setMap(baseMap);
})
function setLocationByBase(){
var coords = new kakao.maps.LatLng(lat, lot);
createTargetMap(coords);
}
function setLocationByRoadAddr(){
var schlAddr = $('input[name=SHL_ROAD_NM_ADDR]').val();
addressSearch(schlAddr).catch(function(data){
var geocoder = new kakao.maps.services.Geocoder();
schlAddr = $('input[name=SHL_NM_ADDR]').val();
geocoder.addressSearch(schlAddr, function(result, status) {
if (status === kakao.maps.services.Status.OK) {
coords = new kakao.maps.LatLng(result[0].y, result[0].x);
createTargetMap(coords);
}else{
alert('위치를 표시할 수 없습니다. 주소를 확인해 주세요.');
}
})
})
}
function addressSearch(schlAddr){
return new Promise(function(resolve, reject){
var geocoder = new kakao.maps.services.Geocoder();
geocoder.addressSearch(schlAddr, function(result, status) {
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
createTargetMap(coords);
} else{
reject();
}
})
});
}
function createTargetMap(coords) {
$('#newLat').text(coords.getLat());
$('#newLot').text(coords.getLng());
var mapContainer = document.getElementById("targetMap")
var mapOption = {
center:new kakao.maps.LatLng(lat,lot),
draggable:true,
level:4
};
var targetMap = new kakao.maps.Map(mapContainer, mapOption);
var marker;
marker = new kakao.maps.Marker({
map: targetMap,
position: coords,
image: markerImage,
clickable: true,
draggable: true
});
targetMap.setCenter(coords);
// 마커 드래그 끝났을때 이벤트
kakao.maps.event.addListener(marker, 'dragend', function(){
var position = marker.getPosition();
$('#newLat').text(position.getLat());
$('#newLot').text(position.getLng());
});
kakao.maps.event.addListener(targetMap, 'rightclick', function(mouseEvent){
var position = mouseEvent.latLng;
marker.setPosition(position);
$('#newLat').text(position.getLat());
$('#newLot').text(position.getLng());
});
}
</script>
네.
일단 로직상 큰 문제는 없습니다.
우선 모든 PC에서 이슈가 발생하는지,
또는 일부 PC에서만 이슈가 발생하는지 확인 부탁드립니다.
특정PC에서만 발생한다면 특정PC의 환경이슈일 확률은 99프로입니다.
그럼 코드말고, 다른 환경을 변화시킬 수 있는 다른 부분을 찾아봐야 합니다.
그 방법으로는 일단브라우저의 시크릿모드를 사용하여 한번 테스트 부탁드립니다.
우선 해당 오류가 발생하는 PC를 재부팅하고
1번 2번 페이지에 들어가서 테스트를 해보시기 바랍니다.
1번은 주소검색의 저희쪽 가이드페이지 샘플이고
2번은 지금 오류가 나는 주소검색의 실제 호출이 되는 REST API입니다.(developers 로그인이 필요합니다)
위 1번,2번페이지의 테스트는
시크릿모드에서 한번, 일반모드에서 한번 이렇게 해주시면 됩니다.
인증서 로그인은 큰 영향은 없을것 같은데, 로그인 전후로도 봐주시면 좋습니다.
만약 1번 페이지는 안되는데, 2번페이지가 된다면,
일단 직접 REST API를 이용해서, 해당 서버에서 주소검색 API를 이용할 수 있게 하고, 검색결과를 내려주는 방식으로 하면, 해결될 것으로 보입니다.
직접 REST API를 클라이언트 사이드에서 통신하지 말고, 해당 사이트 서버에서 프록시 하는 방식으로 구현하시면 됩니다.
내일 한번 확인해 보겠습니다.
그전에 몇가지 질문드릴게요.
-
시크릿모드, 일반모드를 나눠서 테스트를 하는 이유가 궁금합니다.
-
시크릿모드 또는 일반모드의 테스트 결과가 상이할 경우 어떤 방법으로 조치를 할 수 있을까요?
-
만약 REST API를 이용해서 통신이 된다면, 클라이언트 쪽은 포기를 해야하는 걸까요? 포기를 하기엔 적절한 해결방법이라 생각이 들지 않아 질문 드립니다.
감사합니다.
-
크롬익스텐션이나 툴바 등 이러한 브라우저의 탭에 접근하여, 내부 동작을 변화시킬 수 있는 툴들의 영향을 없애기 위해서 입니다.
즉 외부요인 제거입니다. 특히 크롬 익스텐션 중에는, 모든 네트워크 콜을 잡아서 조작할 수 있는 툴들도 있습니다. -
만약 상이하다면, 크롬에 추가적으로 설치된 익스텐션이나, 툴바 같은 이러한 추가 프로그램을 삭제하셔야 합니다. 다만 어떤 익스텐션이 문제를 일으키는지 모르므로 하나씩 제거하면서 찾으셔야 합니다.
-
네 정확한 이유를 알 수 없기 때문에, 현재로써는 그렇습니다.
CORS설정을 위한 헤더값들의 손실이 있는 것으로 보이는데, 이를 해결하려면, 동일리소스 정책을 이용하면 됩니다. 그게 직접 해당 페이지를 서빙하는 같은 도메인에 proxy api를 만드는 방법입니다.
해결했습니다.
일단 프록시 서버 구축은 방화벽 정책 관련하여 시간이 좀 걸려서
주소검색 로직을 geocoder 객체의 addressSearch 메소드가 아닌
브라우저에서 https://dapi.kakao.com/v2/local/saerch/address.json?query=~~ 로 ajax 요청하는 방법으로 변경하여 해결하였는데요.
왜 변경한 방법으론 CORS정책 위반 오류가 발생하지 않는지 궁금합니다.
그 부분은 좀 자세히 확인이 필요합니다.
일단 Geocoder 주소검색이 dapi~~~/address.json 을 이용하는건 동일합니다.
그런데 오류가 발생했다는건,
Geocoder쪽에서 잘못 처리됬거나,
developers 인증서버의 오류이거나 하는데
둘다 아직 확인된 바는 없습니다.
동시다발적으로 이슈가 발생한게 아니므로, 단순한 설정 이슈일 가능성도 있는데;
현재 재현조건을 못찾아서 자세한 설명은 드리기 어려울 것 같습니다.
APPID 적어주셨으니 이걸로 Developers 담당자 분게 여쭤보도록 하겠습니다.
@KakaoMap 안녕하세요~ 혹시 해당 AppID로 요청이 들어온 4월 15일 정도의 오류로그가 확인이 가능하실까요?
감사합니다. 궁금하네요…