React 에서 REST API cross origin 에러

현재 리액트(next.js) 사용해서 홈페이지를 만들었습니다.
REST API 키와 Axios를 사용해서 위치 정보, 키워드로 장소 검색을 이용하고 있는데,

const keyword = 'KakaoAK '.concat(process.env.KAKAO_REST_KEY);
const res = await axios.get('https://dapi.kakao.com/v2/local/search/keyword.json', {
    params: {
        page: 1,
        size: 15,
        sort: 'accuracy',
        query: value,
        x: location?.x,
        y: location?.y
    },
    headers: { 
        Authorization: AuthStr,
    }
})

const address = await axios.get('https://dapi.kakao.com/v2/local/geo/coord2address.json', {
    params: {
        input_coord: 'WGS84',
        x: props.coords.longitude,
        y: props.coords.latitude
    },
    headers: { 
        Authorization: AuthStr,
    }
})

이런식으로 요청을 보냈을 때 잘 되다가 갑자기 cross 에러가 뜹니다.
현재는 페이지 이동이 있는 후에 다시 요청을 보내면 에러가 뜨네요…

Access to XMLHttpRequest at 'https://dapi.kakao.com/v2/local/geo/coord2address.json?input_coord=WGS84&x=127.07221980000001&y=37.4951757' from origin 'Mydomain' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

플랫폼에서 도메인 등록을 했는데 제가 사용하는 방식이 잘 못된 방식일까요?..

1개의 좋아요