카카오 로그인 cors 관련 문의 드립니다 ㅠㅠ

17

카카오 로그인을 구현하고자 하는데, 위와 같은 에러가 발생합니다…
fastapi나 django나 같은 에러가 발생하는데ㅠㅠ 원인을 못찾겠네요

각 코드는 아래와 같고, api key와 redirect uri는 잠시 지웠습니다 ㅠㅠ

django code
image

fastapi code
image

구글링해도 도저히 찾지 못하고있어서… 힌트라도 주신다면 정말 감사하겠습니다!!!

/oauth/authorize를 호출한 페이지 주소와 리다이렉트 받은 주소의 도메인 및 포트가 다른가요?

그렇다면 소유하신 서버에서 CORS 설정을 해주셔야합니다.


앱 ID 알려주시면 로그도 한번 확인해볼게요~


앱ID
https://developers.kakao.com/ 의 내 애플리케이션>앱 설정>요약 정보 : 기본정보에 있는 앱 ID
숫자로된 ID 입니다~
ex) 123456

답변 주셔서 정말 감사합니다 ㅠㅠ
서버에서 cors 설정도 했고, 호출페이지 주소와 도메인 및 포트가 모두 localhost:8080 인데… 왜 그러는지 모르겠네요 ㅠㅠ

앱 id는 630173 입니다!!

/oauth/authorize를 Ajax로 호출하셨나요?

/oauth/authorize는 리다이렉트 URI로 302 리다이렉트를 해야하기때문에 Ajax 호출하시면 안되고

a href 링크로 호출해보시겠어요?

redirect로 호출했습니다 ㅠㅠ

a href로도 테스트를 했었는데, 이 경우에는 잘 넘어가집니다…
물론 이렇게 구현해도 서비스에는 문제 없을 것 같으나… 백엔드 측에서 처리를 하고 싶은 거여서요 ㅠㅠ

네, front에서 backend href로 호출하고
backend에서 ajax(XMLHttpRequest) 호출하지 않고 리다이렉트 처리하시면 백엔드에서도 처리될 것 같은데… 한번 시도해보시겠어요?

authorize CORS에러의 원인은 비동기 통신 함수(XMLHttpRequest) 를 이용해서 발생합니다.

  1. front -> href /oauth/authorize -> redirect backend
  2. front -> href backend -> redirect /oauth/authorize -> redirect backend

https://kakao-tam.tistory.com/59?category=866966
https://kakao-tam.tistory.com/81?category=872536

1개의 좋아요

아하 처음 올린 글의 사진처럼 redirect를 사용하는데 ㅠㅠ 희한하네요…
image

일단 올려주신 글들 보고 해결해보도록 하겠습니다!!
정말 감사합니다!!!