에러 코드는 아래와 같이 나타납니다
프론트 엔드 쪽에선 인가코드로 토큰까지 요청후 백엔드에게 받은 토큰을 넘겨 주고
재가공된 토큰을 다시 받아오는 중에 이러한 에러가 발생합니다.
post 요청 status는 302가 뜹니다
백엔드쪽에선 모든 CORS를 허용 했다고 하는데 그래도 이러한 CORS가 뜨는건
무언가를 놓치고 있다는걸까요?
안녕하세요.
이전에 올려주신 이미지와 말씀에서 추정하기에 백앤드측 개발자가 따로 있으신것 같은데요.
로그인 관련된 API호출 흐름에 대해 백앤드와 프론트간 처리 방식에 대해 확인이 먼저 필요해 보입니다.
이전에 올려주신 이미지를 참고하시면,
프론트에서는 접근 토큰을 발급받아 백앤드로 넘겨준 뒤, JS SDK에 토큰을 할당하는 것으로 보입니다.
https://tgle.ml/users/oauth/kakao/callback 여길 호출하여 백앤드로 넘겨줄 때 백앤드에서는 302 리디렉션 하고 있는데요 이건 백앤드측 개발자는 리디렉션 방식으로 개발되는 것으로 알고 이렇게 처리하셨을겁니다.
즉, 프론트는 자신이 접근토큰을 받아 백앤드로 넘겨주는것으로 알고 있고
백앤드는 접근토큰이 아닌 인가코드를 받아 처리하하고 /concerts 페이지로 이동시키는 것으로 이해하고 있을 가능성이 높아 보입니다.
현재 오류의 원인이 코드에 있기 보다 백앤드와 프론트간 처리 방식에 이견이 있어 보이며, 이 부분을 먼저 확인하셔야 할것 같습니다.
로그인 처리를 어떻게 하고 인가코드로 토큰발급은 어디에서 처리할것이며 백앤드에서 제공하는 URI가 무엇을 하기 위한 URI인지 먼저 확인되셔야 할것 같습니다.
안녕하세요 백엔드측 개발자입니다
제가 이해하기로는 접근토큰을 받아서 ‘https://kapi.kakao.com/v2/user/me’ 해당 url로 전송 한 후에
유저 정보를 받아서 서비스 자체에 저장하게 되는 구조로 만들어져 있습니다. 그래서 사용자 정보를 저장한 후
자체적으로 토큰을 가공해서 프론트측으로 전달하는 구조로 만들었는데, 유저정보 확인과 저장까지 전부다 정상적으로 진행됩니다.
그런데 제가 토큰을 가공해서 프론트측으로 쿠키와 바디쪽으로 보내면 받지 못하는 현상이 발생하고 있는데 혹시 제가 어떤부분에서 잘못했는지 알려주실 수 있을까요?
@kmdet1235
안녕하세요.
첨부 이미지의 코드를 확인해 보니 말씀 처럼 프론트에서 접근토큰을 전달받아 서비스측(카카오것이 아닌)의 accessToken과 refreshToken을 생성 하여 반환하는 것으로 보입니다.
단, 프론트 측에서는 이를 AJAX로 호출하고 있기에 res.redirect 코드는 필요 없어 보입니다.
해당 코드를 제거하시고 호출측에서 CORS 오류가 발생하지 않도록 조치만 해주시면 될것 같습니다.
추가로 쿠키에 accessToken, refreshToken을 할당하시는 이유가 어떻게 될까요?
사용자 로그인 인증을 위해서 accessToken과 refreshToken을 할당하고 있습니다!
만약 프론트와 백앤드쪽 도메인이 다르다면 res.cookie()로 쿠키 저장은 안됩니다.
프론트에서 직접 쿠키 설정을 하거나 프론트와 백앤드 둘 다, withCredentials 옵션을 사용해야 합니다. 참고 부탁드립니다.
확인해보고 수정하도록 하겠습니다! 감사합니다