Rest API 로 로그인 구현 시 CORS 문제

REST API
#1

rest API 로 로그인을 구현 중인데요. 아래와 같이 요청을 보내고 있습니다.

`axios.get('https://kauth.kakao.com/oauth/authorize', {
                                params: {
                                    client_id: process.env.REACT_APP_REST_API_KEY as string,
                                    redirect_uri: 'http://localhost:8081/api/kakao/oauth',
                                    response_type: 'code',
                                    state: '/login',
                                },
                                withCredentials: false,
                            });`

응답은 아래 그림과 같습니다.
07

Access to XMLHttpRequest at ‘https://accounts.kakao.com/login?continue=https%3A%2F%2Fkauth.kakao.com%2Foauth%2Fauthorize%3Fresponse_type%3Dcode%26redirect_uri%3Dhttp%3A%2F%2Flocalhost%3A8081%2Fapi%2Fkakao%2Foauth%26state%3D%2Flogin’ (redirected from ‘https://kauth.kakao.com/oauth/authorize?redirect_uri=http:%2F%2Flocalhost:8081%2Fapi%2Fkakao%2Foauth&response_type=code&state=%2Flogin’) from origin ‘http://localhost:8081’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

사용자가 카카오에 로그인 되지 않은 상황에서 카카오 로그인 또는 회원가입 창이 떠야하는데 위와 같이 CORS 문제가 발생합니다.

  1. localhost:8081 -> 2. kauth.kakao.com -> 3. accounts.kakao.com 으로 요청이 전달되는데

2 -> 3으로 갈 떄 문제가 발생하네요.

도움 부탁드립니다.

1개의 좋아요
#2

안녕하세요~

frontend에서 axios호출하신거죠?

‘https://kauth.kakao.com/oauth/authorize’ 요청은 redirect_uri로 리다이렉트 되야 하므로 비동기 통신 방식으로 호출하시면 안됩니다.

리다이렉트받을 수 있도록
html 링크로 구현하거나, JavaScript SDK를 사용해주세요.

#3

감사합니다.