CROS 도메인 오류가 발생하면서 로컬API 호출이 실패하고 있습니다.
개발자계정에는 해당 도메인이 이미 등록되어 있는 상태입니다.
프로덕션 환경에서 이미 이용중이었으나 최근에 갑자기 위에 오류가 발생하면서 장소검색이 실패하고 있습니다.
확인부탁드립니다.
오류이미지 첨부합니다.
추가내용
4일전 문의중 해당 API에서 오류가 있다는 문의를 보았습니다. 해당 부분과 연관이 있는건가요?
https://devtalk.kakao.com/t/v2-local-geo-coord2address-api/110988
로컬 API는 기본으로 크로스 도메인 처리가 되어 있습니다.
헤더에 AppKey를 넣어서 호출했는지 확인 부탁드립니다.
https://apis.map.kakao.com/web/sample/coord2addr/
위에 샘플을 이용하여 개발을 진행했으며
geocoder.coord2Address(coords.getLng(), coords.getLat(), callback);
호출시 헤더에 Appkey가 들어가 있는 부분도 확인했습니다.(이미지 첨부합니다.)
그러나 동일한 오류가 발생하고 있습니다.
확인부탁드립니다.
샘플 페이지에서도 동일한 문제가 발생하고 있나요?
아뇨
카카오 샘플페이지에서는 잘 작동하고 있습니다.
혹시 헤더에 accept-language 라는 필드를 따로 지정한다거나
해당 필드에 관한 별도의 조치가 있으신가요?
없습니다.
위에 코드의 경우 services.js 파일부분을 debug 한 부분입니다.
따로 API를 커스터마이즈 한 내용은 없습니다.
services.js의 경우 저희가 직접 로드한게 아니라 카카오 SDK 로드시 자동 load되는 js 입니다.
링크로는 아래와 같이 확인됩니다.
http://s1.daumcdn.net/svc/attach/U03/cssjs/mapapi/libs/1.0.1/1515130215283/services.js
네 답변 감사합니다.
저희쪽 서버 이슈인지도 확인중에 있습니다.
혹시 가능하시다면 제가 확인이 가능한 프로덕션 페이지를 알려주실 수 있을까요?
아직 노출되면 안되는 페이지라면
제 개인 메세지로 보내주세요 확인해 보겠습니다.
안녕하세요. 어제 답글을 더 달 수가 없어서 고맙다는 말도 못드렸습니다.ㅠㅠ
//답글을 달지 못해 위에 내용을 수정했었는데 수정할때에는 알림이 안가는것 같네요.
//답글갯수를 초기화하는 방법은 없는가요?
어제 ajax 방식으로도 구현해봤지만 동일한 CROS 오류가 발생합니다.
아래 적용한 코드 첨부드립니다.
$.ajax({
url: '//dapi.kakao.com/v2/local/search/coord2address.json',
headers: { 'Authorization': 'KakaoAK fb70e91babd584cf8f9be41795a2eae6'},
type: 'GET',
data: {
x: coords.getLng(),
y: coords.getLat()
}
}).done(function(data) {
console.log(data);
});
그리고 해당 오류는 11월 5~6일부터 발생했습니다. 그전까지는 정상적으로 동작하고 있었습니다.
AJAX 방식으로도 실패하다나니 어떻게 수정해야 할 지 모르겠습니다.
Request header field accept-language is not allowed by Access-Control-Allow-Headers in preflight response.
또는
Request header field x-csrf-token is not allowed by Access-Control-Allow-Headers in preflight response.
위에 오류가 발생하는것과 관련해서 오늘 오전에 다음의 방식을 시도해보았습니다.
var tempAcceptLanguage = '';
var tempXCSRFTOKEN = '';
if (typeof $.ajaxSettings !== 'undefined' && typeof $.ajaxSettings.headers !== 'undefined') {
tempAcceptLanguage = $.ajaxSettings.headers.hasOwnProperty("Accept-Language") ? $.ajaxSettings.headers["Accept-Language"] : '';
tempXCSRFTOKEN = $.ajaxSettings.headers.hasOwnProperty("X-CSRF-TOKEN") ? $.ajaxSettings.headers["X-CSRF-TOKEN"] : '';
delete $.ajaxSettings.headers["Accept-Language"];
delete $.ajaxSettings.headers["X-CSRF-TOKEN"];
}
$.ajax({
url: '//dapi.kakao.com/v2/local/search/coord2address.json',
headers: { 'Authorization': 'KakaoAK fb70e91babd584cf8f9be41795a2eae6'},
type: 'GET',
data: {
x: coords.getLng(),
y: coords.getLat()
}
}).done(function(data) {
console.log(data);
});
if (tempAcceptLanguage !== '') {
$.ajaxSettings.headers["Accept-Language"] = tempAcceptLanguage;
}
if (tempXCSRFTOKEN !== '') {
$.ajaxSettings.headers["X-CSRF-TOKEN"] = tempXCSRFTOKEN;
}
그러나 실제 AJAX 호출을 보면 Accept-Language 헤더가 삭제되지 않고 브라우저에서 자동적으로 추가되고 있는것으로 보입니다.
해결방법이 있을가요?
그리고 여러가지 플라그인들중에 ajax header에 직접 값이 설정되는것들이 있다면 위와 같이 개별적으로 하나하나 해당 헤더들을 제거해주어야 하는건가요?
(답글갯수에 제한이 있어서 오늘은 한개 답글을 길게 썼는데 양해부탁드립니다.)
혹시 요청 헤더 필드에 DNT는 직접 추가해 주신건가요?
아닙니다.
직접 추가한 부분은 없습니다.
좀 더 확인해 보겠습니다…
일단 가장 의심가는 것은
해당 페이지 내에서 사용하고 있는 jQuery의 Ajax 커스텀 세팅 부분입니다.
$(document).ajaxSend() 함수를 사용하였고
이 함수로 등록한 콜백 핸들러로 요청 헤더에 무엇인가를 세팅을 해 주고 있습니다.
때문에 모든 요청마다 request header에 커스텀 헤더가 추가되어 요청되고 있습니다.
그럼 jQuery.ajax()를 사용하지 않는 API 코드는 왜 문제가 되는지 의문스러울 수 있는데
ajaxSend() 뿐 아니라 built-in 객체인 XHR을 커스텀 한 세팅이 있을 것이라 예상됩니다.
XHR의 프로토타입에 영향을 주어
모든 XHR을 이용한 요청에 문제가 생긴 것이 아닌가 추측해 보고 있습니다.
만약 이 요청 자체가 문제가 되었다면
다른 사용자분들의 보고가 잇달았을 텐데 아직까지 그런 보고는 없어서요.
샘플페이지에서는 정상동작하는 것을 보면
정황상 가능성이 있는 얘기입니다.
실제 예로, XHR에 영향을 받지 않는 fetch를 써서 요청을 날려보면
fetch('https://dapi.kakao.com/v2/local/geo/coord2address.json?x=127&y=37', {
headers: { 'Authorization': 'KakaoAK REST_API_KEY' }
})
.then(res => res.json())
.then(data => console.log(JSON.stringify(data, null, '\t')));
아래와 같이 정상적으로 응답을 받을 것이라 예상됩니다.
{
"meta": {
"total_count": 1
},
"documents": [
{
"road_address": null,
"address": {
"address_name": "경기 평택시 오성면 교포리 199-4",
"region_1depth_name": "경기",
"region_2depth_name": "평택시",
"region_3depth_name": "오성면 교포리",
"mountain_yn": "N",
"main_address_no": "199",
"sub_address_no": "4",
"zip_code": ""
}
}
]
}감사합니다.
일단 저희 서버에서 REST API를 호출하는 방식으로 구현해서 해결했습니다.
하지만 다른 분들도 발생할 지 모르니 위에 코드도 실행해보고 결과를 남겨드리겠습니다.
fetch API를 사용해봤지만 AJAX 때와 동일한 CROS 오류가 발생했습니다. ㅠㅠ
아래 에러내용 첨부합니다.
Request header field accept-language is not allowed by Access-Control-Allow-Headers in preflight response.
하나하나 답변주신 @doji.doo님
그동안 정말 감사드립니다.
-_-? 제가 아는 범위 이상인데요. 진짜 모르겠습니다.
API 레벨에서 해결책을 드리지 못하게 되어 안타깝고
개인적으로 원인을 찾지 못해서 저도 답답하네요. 도대체 뭘까요 ㅠ