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

nohseohyun · 6월 22, 2022, 2:50오후

methods: {
    searchMap () {
      const search = this.search
      axios.get(`https://dapi.kakao.com/v2/local/search/keyword.json?x=37.4792788&y=126.9526694&radius=20000&query=${search}`,
      { headers: { 'Authorization': 'KakaoAK {REST_API_KEY}' }}).then(res => {
        console.log(res.data)
        const list = res.data.documents
        this.resultList = []
        for (let i = 0; i < list.length; i++) {
          this.resultList.push(
            { address: list[i].road_address_name, name: list[i].place_name, 
            x: list[i].x, y: list[i].y, phone:list[i].phone, url: list[i].place_url }
          )
        }
        console.log(this.resultList)
        this.show = true
      })

searchMap()매소드가 실행되면 사용자가 키워드를 입력한대로 search에 담기고,
이를 쿼리값으로 받아서 axios.get을 통해 카카오맵의 documents 정보를 받아오고자 합니다.
기존엔 작동이 잘 되었으나 갑자기 “errorType”: “AccessDeniedError”, “message”: “cannot find Authorization : KakaoAK header” 이라는 에러가 발생합니다.
발급받은 REST_API_KEY를 알맞게 헤더에 담아 보냈는데도 오류가 발생하는 이유가 무엇일까요?

lea.ju · 6월 23, 2022, 12:10오전

첨부 코드에서 headers를 아래와 같이 변경해서 호출했더니 정상적으로 응답 결과를 받았습니다.

headers: { 'Authorization': `KakaoAK ${REST_API_KEY}` }}

401 오류는 앱 인증 오류로 헤더에 앱 키가 담겨 호출되었는지 다시 확인 부탁드립니다.
그리고 간혹 브라우저 확장 프로그램으로 인해 앱 키가 누락되는 경우가 있습니다.
시크릿 모드에서도 확인해주세요.

nohseohyun · 6월 23, 2022, 6:59오전

말씀하신대로 해보았지만 vue에서 $ { } 안에 REST_API_KEY부분이 빨간줄 뜨면서 “Digit Expected” 라는 창이 뜨고
cmd창에서는 “Parsing error: Floating-point numbers require a valid exponent” 라는 오류가 뜹니다.

nohseohyun · 6월 23, 2022, 7:55오전

현재 위의 빨간줄 오류는 해결이 됐지만 여전히 본문과 같은 오류가 나며,
콘솔창에 나오는 오류를 자세히 적어보자면,

Access to XMLHttpRequest at ‘https://dapi.kakao.com/v2/local/search/keyword.json?x=37.4792788&y=126.9526694&radius=20000&query=스타벅스’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.
Failed to load resource: net::ERR_FAILED
Uncaught (in promise) AxiosError

이와 같습니다. 시크릿모드에서도 해보았지만 동일한 오류가 뜹니다.

lea.ju · 6월 23, 2022, 11:57오후

네트워크 탭에서 응답 코드 및 헤더도 확인해보셨나요?

로컬 API는 CORS 허용이 되어있습니다.

이전 유사 게시글을 보면 헤더에 임의 설정값이 들어가 있는 경우 발생하는 것으로 보이네요.
axios header에 다른 설정도 적용되었는지 확인 부탁드립니다.

그리고 저는 axios에 다른 설정 없이 첨부 코드를 그대로 사용했을때도 정상 동작하지만
위와 같은 상황일 수 있어서 fetch를 이용한 코드도 첨부해 드립니다.
아래 코드도 확인해주시고 이전 유사 게시글 답변도 참고해주세요.

const REST_API_KEY = '발급받은 REST API 키';
const headers = new Headers({'Authorization': `KakaoAK ${REST_API_KEY}`});

fetch('https://dapi.kakao.com/v2/local/search/keyword.json?x=37.4792788&y=126.9526694&radius=20000&query=스타벅스', {
    headers
}).then(res => res.json())
.then(data => console.log(data));

결과:

{
    "documents": [
        {
            "address_name": "서울 중구 태평로1가 25",
            "category_group_code": "CE7",
            "category_group_name": "카페",
            "category_name": "음식점 > 카페 > 커피전문점 > 스타벅스",
            "distance": "",
            "id": "27557389",
            "phone": "1522-3232",
            "place_name": "스타벅스 한국프레스센터점",
            "place_url": "http://place.map.kakao.com/27557389",
            "road_address_name": "서울 중구 세종대로 124",
            "x": "126.97788238985001",
            "y": "37.567409708254644"
        },
        {
            "address_name": "서울 중구 무교동 32-2",
            "category_group_code": "CE7",
            "category_group_name": "카페",
            "category_name": "음식점 > 카페 > 커피전문점 > 스타벅스",
            "distance": "",
            "id": "321010429",
            "phone": "1522-3232",
            "place_name": "스타벅스 무교로점",
            "place_url": "http://place.map.kakao.com/321010429",
            "road_address_name": "서울 중구 무교로 15",
            "x": "126.978923787718",
            "y": "37.5672801553634"
        },
        {
            "address_name": "서울 중구 무교동 45",
            "category_group_code": "CE7",
            "category_group_name": "카페",
            "category_name": "음식점 > 카페 > 커피전문점 > 스타벅스",
            "distance": "",
            "id": "8403570",
            "phone": "1522-3232",
            "place_name": "스타벅스 무교동점",
            "place_url": "http://place.map.kakao.com/8403570",
            "road_address_name": "서울 중구 무교로 21",
            "x": "126.978896422532",
            "y": "37.5679865311548"
        },
        {
            "address_name": "서울 중구 소공동 87-1",
            "category_group_code": "CE7",
            "category_group_name": "카페",
            "category_name": "음식점 > 카페 > 커피전문점 > 스타벅스",
            "distance": "",
            "id": "22894118",
            "phone": "1522-3232",
            "place_name": "스타벅스 환구단점",
            "place_url": "http://place.map.kakao.com/22894118",
            "road_address_name": "서울 중구 소공로 112",
            "x": "126.97912831454218",
            "y": "37.564475391044695"
        },
        {
            "address_name": "서울 중구 을지로1가 50",
            "category_group_code": "CE7",
            "category_group_name": "카페",
            "category_name": "음식점 > 카페 > 커피전문점 > 스타벅스",
            "distance": "",
            "id": "1146325598",
            "phone": "02-758-8504",
            "place_name": "스타벅스 서울시청점",
            "place_url": "http://place.map.kakao.com/1146325598",
            "road_address_name": "서울 중구 을지로 19",
            "x": "126.97978433244671",
            "y": "37.56620271475311"
        },
        {
            "address_name": "서울 중구 소공동 87-10",
            "category_group_code": "CE7",
            "category_group_name": "카페",
            "category_name": "음식점 > 카페 > 커피전문점 > 스타벅스",
            "distance": "",
            "id": "587230271",
            "phone": "",
            "place_name": "스타벅스 소공사옥",
            "place_url": "http://place.map.kakao.com/587230271",
            "road_address_name": "서울 중구 소공로 112",
            "x": "126.979121519047",
            "y": "37.5644907067794"
        },
        {
            "address_name": "서울 중구 소공동 70",
            "category_group_code": "CE7",
            "category_group_name": "카페",
            "category_name": "음식점 > 카페 > 커피전문점 > 스타벅스",
            "distance": "",
            "id": "27389694",
            "phone": "1522-3232",
            "place_name": "스타벅스 소공로점",
            "place_url": "http://place.map.kakao.com/27389694",
            "road_address_name": "서울 중구 남대문로7길 19",
            "x": "126.980790051363",
            "y": "37.5638855205458"
        },
        {
            "address_name": "서울 종로구 종로1가 89-3",
            "category_group_code": "CE7",
            "category_group_name": "카페",
            "category_name": "음식점 > 카페 > 커피전문점 > 스타벅스",
            "distance": "",
            "id": "312821024",
            "phone": "1522-3232",
            "place_name": "스타벅스 광화문우체국점",
            "place_url": "http://place.map.kakao.com/312821024",
            "road_address_name": "서울 종로구 종로 6",
            "x": "126.978058216854",
            "y": "37.5699721725557"
        },
        {
            "address_name": "서울 종로구 종로1가 17",
            "category_group_code": "CE7",
            "category_group_name": "카페",
            "category_name": "음식점 > 카페 > 커피전문점 > 스타벅스",
            "distance": "",
            "id": "27030449",
            "phone": "1522-3232",
            "place_name": "스타벅스 광화문D타워점",
            "place_url": "http://place.map.kakao.com/27030449",
            "road_address_name": "서울 종로구 종로3길 17",
            "x": "126.97906325312978",
            "y": "37.570466100534176"
        },
        {
            "address_name": "서울 중구 다동 111",
            "category_group_code": "CE7",
            "category_group_name": "카페",
            "category_name": "음식점 > 카페 > 커피전문점 > 스타벅스",
            "distance": "",
            "id": "261003114",
            "phone": "",
            "place_name": "스타벅스 을지로국제빌딩점",
            "place_url": "http://place.map.kakao.com/261003114",
            "road_address_name": "서울 중구 남대문로 109",
            "x": "126.982161109115",
            "y": "37.5670644499082"
        },
        {
            "address_name": "서울 중구 태평로2가 69-7",
            "category_group_code": "CE7",
            "category_group_name": "카페",
            "category_name": "음식점 > 카페 > 커피전문점 > 스타벅스",
            "distance": "",
            "id": "8438581",
            "phone": "1522-3232",
            "place_name": "스타벅스 태평로점",
            "place_url": "http://place.map.kakao.com/8438581",
            "road_address_name": "서울 중구 세종대로 72",
            "x": "126.976711254608",
            "y": "37.5625008559003"
        },
        {
            "address_name": "서울 종로구 신문로1가 163",
            "category_group_code": "CE7",
            "category_group_name": "카페",
            "category_name": "음식점 > 카페 > 커피전문점 > 스타벅스",
            "distance": "",
            "id": "25115115",
            "phone": "1522-3232",
            "place_name": "스타벅스 새문안로점",
            "place_url": "http://place.map.kakao.com/25115115",
            "road_address_name": "서울 종로구 새문안로 92",
            "x": "126.97489678095884",
            "y": "37.569645382304095"
        },
        {
            "address_name": "서울 중구 서소문동 136",
            "category_group_code": "CE7",
            "category_group_name": "카페",
            "category_name": "음식점 > 카페 > 커피전문점 > 스타벅스",
            "distance": "",
            "id": "26410045",
            "phone": "1522-3232",
            "place_name": "스타벅스 서소문로점",
            "place_url": "http://place.map.kakao.com/26410045",
            "road_address_name": "서울 중구 서소문로 120",
            "x": "126.9744745874965",
            "y": "37.56294278280919"
        },
        {
            "address_name": "서울 중구 을지로2가 6",
            "category_group_code": "CE7",
            "category_group_name": "카페",
            "category_name": "음식점 > 카페 > 커피전문점 > 스타벅스",
            "distance": "",
            "id": "2084275814",
            "phone": "1522-3232",
            "place_name": "스타벅스 을지로내외빌딩R점",
            "place_url": "http://place.map.kakao.com/2084275814",
            "road_address_name": "서울 중구 을지로 51",
            "x": "126.983515045748",
            "y": "37.5662789782839"
        },
        {
            "address_name": "서울 종로구 세종로 185-2",
            "category_group_code": "CE7",
            "category_group_name": "카페",
            "category_name": "음식점 > 카페 > 커피전문점 > 스타벅스",
            "distance": "",
            "id": "7961649",
            "phone": "1522-3232",
            "place_name": "스타벅스 광화문점",
            "place_url": "http://place.map.kakao.com/7961649",
            "road_address_name": "서울 종로구 세종대로 167",
            "x": "126.97629649901215",
            "y": "37.57122962143047"
        }
    ],
    "meta": {
        "is_end": false,
        "pageable_count": 45,
        "same_name": {
            "keyword": "스타벅스",
            "region": [],
            "selected_region": ""
        },
        "total_count": 1873
    }
}

https://devtalk.kakao.com/t/cors/115909

https://devtalk.kakao.com/t/api-cors/117065/2

https://devtalk.kakao.com/t/api-cors/117676/4

https://devtalk.kakao.com/t/https-dapi-kakao-com-v2-local-search-address-json-query-401/111149/5

그래도 안된다면 브라우저 캐시 삭제 후 다시 확인 부탁드립니다.
캐시삭제