카카오 로그인 REST API 사용 시 CORS 오류 (Access-Control-Allow-Origin이 wildcard '*'이면 안됨)

REST API
1

안녕하세요.

서비스에서 카카오로그인을 지원하기 위해 REST API를 이용한 카카오로그인 관련 부분을 개발 중입니다.

처음 인가 코드 받기 단계에서 Postman 등 브라우저가 아닌 방식으로 API 호출할 때는 카카오 로그인 화면에 해당하는 html을 받는 것을 확인했는데, 실제 서비스 web page에 login 버튼을 추가한 후 backend의 redirect를 통해 브라우저에서

카카오계정

를 호출할 경우 Allow-Control-Allow-Origin이 wildcard ‘*’ 면 안된다는 오류가 발생합니다.

Access to XMLHttpRequest at ‘카카오계정’ (redirected from ‘http://api.mydomain.com:8080/api/login’) from origin ‘http://www.mydomain.com:3000’ 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.

(my_redirect_url, my_client_id, mydomain.com 등의 값은 실제 사용 중인 값이 있으나 오픈된 게시판이라 저렇게 기재하였습니다.)

제가 이해하기로는 kakao developer의 내 애플리케이션 설정에서 플랫폼과 카카오 로그인의 redirect URI를 제 서버의 정보로 등록하면 Access-Control-Allow-Origin에 해당 URL 정보가 들어와야 하는 것으로 알고 있는데, 왜 wildcard로 설정되는 것인가요?

혹시 다른 전제 조건이 있는 것인가요? 아니면 원래 카카오 로그인에서는 Access-Control-Allow-Origin을 항상 wildcard로 주나요?

2

안녕하세요.

인가요청(/oauth/authorize)은 XMLHttpRequest를 이용한 비동기 통신 방식으로 호출 하시면 안됩니다. (REST-API방식이라면 UI에서 href로 페이지 이동 처리 해주세요)
카카오측 로그인 및 동의 이후 html 을 전달하는 것이 아니라 소유하신 사이트로 리다이렉트 하고
리다이렉트 할때 code(인가코드)를 파라메터로 받으셔서 액세스 토큰 조회 및 사용자 정보조회 진행하시면됩니다.

1개의 좋아요
3

감사합니다. 알려주신 방법으로 테스트 코드로는 문제가 해결됨을 확인했습니다.
직접 서비스에 적용해 보겠습니다.

감사합니다.

1개의 좋아요