[리액트] (해결) REST API 이용한 카카오 소셜 로그인 구현

프론트는 리액트, 백은 장고 REST API로 카카오 소셜 로그인을 구현하는 중인데,

인가 코드를 받고 백에 넘겨서 토큰을 받아야 하는 상황이다.

 

axios
      .get(`http://localhost:8000/main/login/kakao?code=${code}`, { //code는 인가코드
      ~~~~
      }.then((res) => {
        console.log(res); //사용자 정보가 들어있는 json이 출력되어야 함

 

인가 코드를 받아서 백엔드에 넘기는 건 잘 되지만, 토큰을 받는데서 오류가 발생한다.

 

토큰은 JSON 형식으로 {'access_token':~~~, 'token_type':~~}과 같이 출력되어야 하는데,

사진과 같이 html이 출력된다...

 

하지만 더 이상한 건, 다른 컴퓨터로 실행했을 땐 json이 잘 뜬다..!!

더더 이상한건, vscode에 라이브 쉐어를 이용해서 내 로컬로 프런트, 백 서버를 열고 다른 컴퓨터로 접근했을 때도 json이 잘 뜬다....

 

 

현재 카카오 포럼에 글을 올려두었는데, 아직 답이 없다. 뭐가 문제일까...??

 

 

 

---

++ 장고에서 구현한 것 대신 카카오 REST API를 이용하여 해결했다.

이렇게 되면 백에서 데이터를 받고, 가공할 수 있는 로직을 다시 짜야하지만.. 이게 최선인 것 같다.

 

참고

React.js 카카오 로그인, 사용자 프로필 가져오기 - Vlee's Tale