좌표로 주소 변환할 때 cors 에러가 발생합니다

지도/로컬 API
#1

좌표로 주소 변환할 때 Cors 에러가 발생합니다.

Accept: application/json, text/plain, /
Access-Control-Allow-Origin: *
Authorization: KakaoAK {key값}
Referer: http://localhost:8100/
sec-ch-ua: " Not;A Brand";v=“99”, “Google Chrome”;v=“91”, “Chromium”;v="91"
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36

해당 오류가 발생했을 때 어떤 설정을 추가해야되는지 알려주시면 감사하겠습니다.

키워드검색으로 주소를 axios.get할 때 정보를 가져오지 못합니다
#2

코드를 어떻게 작성하셨는지 알 수 있을까요?

일단 제가 확인한 코드로는 에러가 발생하지 않습니다.

코드:

const appkey = 'your_appkey';
const url = 'https://dapi.kakao.com/v2/local/geo/coord2address.json?x=127.423084873712&y=37.0789561558879&input_coord=WGS84'
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();
  console.log(data);
})();

결과:

{
  "meta": {
    "total_count": 1
  },
  "documents": [
    {
      "road_address": {
        "address_name": "경기도 안성시 죽산면 죽산초교길 69-4",
        "region_1depth_name": "경기",
        "region_2depth_name": "안성시",
        "region_3depth_name": "죽산면",
        "road_name": "죽산초교길",
        "underground_yn": "N",
        "main_building_no": "69",
        "sub_building_no": "4",
        "building_name": "무지개아파트",
        "zone_no": "17519"
      },
      "address": {
        "address_name": "경기 안성시 죽산면 죽산리 343-1",
        "region_1depth_name": "경기",
        "region_2depth_name": "안성시",
        "region_3depth_name": "죽산면 죽산리",
        "mountain_yn": "N",
        "main_address_no": "343",
        "sub_address_no": "1",
        "zip_code": ""
      }
    }
  ]
}
#3

//TODO:: kakao HttpRequest Headers
public headerDict = {
‘Authorization’: ‘KakaoAK {my_appkey}’,
“Access-Control-Allow-Origin”: “*”,
}

getTransAddress(x, y){
return new Promise((resolve, reject) => {
this._http.get(“https://dapi.kakao.com/v2/local/geo/coord2address.json?x=” + x + “&y=” +y + “&input_coord=WGS84”, { headers: this.headerDict })
.subscribe(res => {
resolve(res);
}, error => {
reject(error);
});
});
}

이렇게 작성하였습니다.

image

postman 요청 시 아래와 같이 정상적으로 나타납니다.
image

#4

image
에러 메세지 중 위 문구를 살펴보시면

image

x-access-token 이라는 필드가 헤더에 붙어서 요청되어서 문제가 되고 있는 것으로 보입니다.
도메인 출처가 다른 요청시, (모두 그렇지는 않지만)본 요청에 앞서 사전 요청(preflight request)을 하게 되는데,
사전 요청을 시도해 본 결과 본 요청시 허용되는 헤더 값 (Access-Control-Allow-Headers) 목록 에 포함이 되지 않는
x-access-token 이라는 값이 요청 헤더에 있어서 CORS 에러가 발생한 상황입니다.

만약 필요에 의해 넣으신 헤더라면 해당 값을 넣지 않는 코드로 재작성 하셔야 합니다.

특정 라이브러리를 통해서 서버와의 비동기 통신을 진행하고 계신 경우,
해당 라이브러리(for xhr or fetch)에서 임의로 헤더 값을 넣어서 요청하는 경우가 있을 수 있습니다.
해당 헤더값이 자동으로 추가되지 않도록 옵션값을 조절해 주시거나,
헤더값 제어가 불가능할 경우, 대체 라이브러리 사용이나 직접 구현을 통해서
인증 외의 헤더 값이 요청에 포함되지 않도록 해 주셔야 하겠습니다.

#5

감사합니다.
X-access-token 및 ‘Access-Control-Allow-Origin’ 헤더들을 다 지우니까 작동되네요

1개의 좋아요