카카오 API CORS 이슈

이슈 내용

Access to XMLHttpRequest at 'http://dapi.kakao.com/v2/local/geo/coord2address.json?x=126.57066121198349&y=33.450700761312206' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

Kakao 지도 API

좌표로 주소를 반환받는 기능을 만들던 중 cors 이슈가 발생했다.. ㅂㄷㅂㄷ..

아래의 메서드를 실행할때

geocoder.coord2RegionCode(위도, 경도)

카카오 api에 요청을 보내게 되고

http://dapi.kakao.com/v2/local/geo/coord2regioncode.json?x={x}&y={y}

아래와 같은 CORS 이슈가 발생한 것이다.

구글링 해본 결과 CORS 해결방법으로 세가지 방법이 있었는데

• package.json에 proxy 설정
• proxy middleware
• 서버를 통한 호출

메서드 호출을 통해 api 요청을 가는 것이라 proxy 설정이나 요청이 발생할때 서버로 요청을 redirect 할수도 없었다.

해결 방안

function searchDetailAddrFromCoords(coords, callback) {
    // 좌표로 도로명 주소 정보를 요청합니다
    geocoder.coord2Address(coords.getLng(), coords.getLat(), callback);
}

예시 중 coord2Address 에서 api 호출하는 부분만 문제였는데 데브톡에서 카카오 개발자가 이를 구현한 코드를 발견했다. 그리고 이를 예시에 맞게 사용할 수 있도록 간단하게 커스터마이징했다!

function searchAddrFromCoords(coords, callback) {
    // 좌표로 도로명 주소 정보를 요청합니다
    // geocoder.coord2Address(coords.getLng(), coords.getLat(), callback);

        const appkey = "KAKAO REST API 키"
    const url = `https://dapi.kakao.com/v2/local/geo/coord2address.json?x=${coords.getLng()}&y=${coords.getLat()}`
    const headers = new Headers();
    headers.append('Authorization', `KakaoAK ${appkey}`);
    headers.append('sec-ch-ua', encodeURIComponent('Not;A Brand";v=“99”, “Google Chrome”;v=“91”, “Chromium”;v="91'));
    headers.append('sec-ch-ua-mobile', '?0');
    const mode = 'cors';

    (async () => {
      const response = await fetch(url, { headers, mode });
      const data = await response.json();
      if (response.status === 200){
        callback(data.documents, "OK");
      }
    })();
  }