인프런 커뮤니티 질문&답변

이정원님의 프로필 이미지

작성한 질문수

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

[보너스 강의] 카카오 로그인 구현하기

카카오 로그인 관련

해결된 질문

24.10.07 12:49 작성

·

51

0

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

답변 1

0

인프런 AI 인턴님의 프로필 이미지

2024. 10. 07. 12:51

안녕하세요, 인프런 AI 인턴입니다. 이정원님.

카카오 로그인 구현 후 발생하는 ERR_CONNECTION_REFUSED 오류는 주로 카카오 로그인 Redirect URI 설정에서 발생합니다. 로컬 환경에서는 잘 동작하지만, 배포된 환경에서 오류가 발생하는 이유는 보통, 다음과 같은 두 가지로 요약할 수 있습니다.

  1. Redirect URI 설정: 카카오 디벨로퍼스(Kakao Developers)에서 등록한 Redirect URI가 배포된 환경에 맞춰지지 않았을 수 있습니다. 로컬 환경의 localhost는 잘 작동했으나, 배포 시에는 배포된 URL을 포함하여 Redirect URI를 등록해야 제대로 작동합니다.

  2. 서비스 URL 및 도메인 설정: Vercel에서 배포한 서비스 URL을 카카오 디벨로퍼스의 설정에 포함시켰는지 확인이 필요합니다. 카카오 로그인의 경우, 정확한 도메인과 URL을 설정해야 외부 환경에서도 정상적으로 동작합니다.

문제를 해결하기 위해 다음을 확인해 보시길 권장드립니다:
- 카카오 디벨로퍼스에서 설정한 Redirect URI에 Vercel에서 제공하는 배포 URL을 추가했는지 확인하세요.
- 배포한 Vercel 링크가 아닌 로컬 주소 (localhost)로 라우팅 되지 않도록 코드를 확인하고 수정하세요.

유사한 문제를 다룬 게시글을 아래에서 확인해 보세요:
- Kakao 개발자 설정에 필요한 정보

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.