카카오 로그인 관련

Question

카카오 로그인 까지 구현 후
vercel에 배포 까지 한 상태이고 아직 도메인은 등록 하지않았습니다만
집에서 할 때는 vscode로 로컬 서버를 열어놔서 몰랏었는데 로컬 서버를 열어놨을 때는 잘되지만
밖에서 제가 vercel에 배포한 사이트를 들어가서 카카오 로그인을 시도해보니 localhost에서 연결을 거부했습니다. ERR_CONNECTION_REFUSED 에러가 나오는데 어디가 문제 인걸까요? ㅠ

lsc · Answer

저도 위와 같이 오류가 났었는데 소셜로그인 구현 후 vercel 배포 시 localhost로 리다이렉트 될 때 위 글 읽고 해결하였습니다.. supabase에서 리다이렉트 설정해주면 되더라구요 ㅜ-ㅜ;

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 이정원님. 카카오 로그인 구현 후 발생하는 ERR_CONNECTION_REFUSED 오류는 주로 카카오 로그인 Redirect URI 설정에서 발생합니다. 로컬 환경에서는 잘 동작하지만, 배포된 환경에서 오류가 발생하는 이유는 보통, 다음과 같은 두 가지로 요약할 수 있습니다. Redirect URI 설정 : 카카오 디벨로퍼스(Kakao Developers)에서 등록한 Redirect URI가 배포된 환경에 맞춰지지 않았을 수 있습니다. 로컬 환경의 localhost 는 잘 작동했으나, 배포 시에는 배포된 URL을 포함하여 Redirect URI를 등록해야 제대로 작동합니다. 서비스 URL 및 도메인 설정 : Vercel에서 배포한 서비스 URL을 카카오 디벨로퍼스의 설정에 포함시켰는지 확인이 필요합니다. 카카오 로그인의 경우, 정확한 도메인과 URL을 설정해야 외부 환경에서도 정상적으로 동작합니다. 문제를 해결하기 위해 다음을 확인해 보시길 권장드립니다: - 카카오 디벨로퍼스에서 설정한 Redirect URI에 Vercel에서 제공하는 배포 URL을 추가했는지 확인하세요. - 배포한 Vercel 링크가 아닌 로컬 주소 ( localhost )로 라우팅 되지 않도록 코드를 확인하고 수정하세요. 유사한 문제를 다룬 게시글을 아래에서 확인해 보세요: - Kakao 개발자 설정에 필요한 정보 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.