HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
♥️
2기 최종 프로젝트 팀별 공간/
🌳
[팀 05] Forest/
🍋
배포 환경에서 oauth 관련 이슈
🍋

배포 환경에서 oauth 관련 이슈

날짜
Aug 5, 2022
분류
환경세팅
oauth
상태
해결중
속성
공통
작성자
참고인
훈기 김

현재 진행 중인 대처

  • amplify 설정 이슈 > netlify로 프론트 배포 변경 > 정상 동작 중
 

Problem

문제상황1
  • oauth 과정 중 카카오서버에서 인가코드 발급 후 redirect를 보낸 직후 바로 다시 /login 으로 404 redirect가 되어, 인가코드를 서버에 보내는 다음 작업이 불가한 상황
      • notion image
 
문제 상황2 [크롬 mixedContent 관련 오류]
  • 현재 프론트(https), 서버(http)이기 때문에 mixed-content 요청을 block 하는 문제
 

해결과정

문제 원인 분석
  • redirect를 시켜주는 지점을 알 수 없음.
    • 해결시도1 amplify가 아닌 netlify로 배포하여, 같은 이슈가 발생하는 지 테스트
문제원인
  • amplify에서 쿼리스트링이 붙어 redirect 요청이 오는 경우, 기본적으로 쿼리스트링을 자르고 원래 path로 redirect 시켜줌 ( 이때 404 > redirect)
  • netlify도 redirect관련 404 notfound 처리함
 
해결 netlify에서 redirect 관련 설정 toml 로 처리 > 정상적으로 카카오에서 보내준 인가코드 받음 확인
 
[문제상황2 발생!]
해결 크롬 설정 > 개인정보 및 보안 > 사이트 설정 > 컨텐츠 밑에 추가 콘텐츠 설정 > 안전하지 않은 콘텐츠 > 안전하지 않은 콘텐츠 표시가 허용됨의 추가버튼 >  “https://test-005--cool-dusk-ced14a.netlify.app/” 등록
해결 update 배포 server를 https로 바꾸어주어 > 더이상 mix-content 관련 에러가 발생하지 않음
 
최종 해결
  • redirect 처리 및 https로 서버 배포하여, > 배포 환경에서 Oauth 로그인 성공
notion image
 
 
 
  • 참고링크
      • Redirects and rewrites
      You can configure redirect and rewrite rules for your Netlify site in two ways: In a _redirects file, each redirect rule must be listed on a separate line, with the original path followed by the new path or URL. Any line beginning with # will be ignored as a comment.
      Redirects and rewrites
      https://docs.netlify.com/routing/redirects/
      Redirects and rewrites
      [Netlify] 네트리파이 redirect 설정 오류 해결기
      Vue.js를 이용해 PWA를 구현하고 있습니다. 원래는 라우터를 해쉬 모드(도메인 뒤에 #/ 이 들어가는 방식 ex: www.DomainName.com/#/RouterName )를 사용해서 라우터를 사용하다가 url 관련 작업중 히스토리 모드(일반적으로 보이는 방식 ex:www.DomainName.com/RouterName )로 변경을 해야될 상황이 되었습니다. 히스토리 모드의 라우터가 더 이쁘기도 하니 바로 변경을 하였는데, 문제점이 발생하였습니다. 뒤에 라우터 네임이 붙은 새로운 창을 열었을시 404로 연결되는 이슈였습니다.
      [Netlify] 네트리파이 redirect 설정 오류 해결기
      https://formason.tistory.com/13
      [Netlify] 네트리파이 redirect 설정 오류 해결기
      리디렉션 사용
      리디렉션을 사용하면 웹 서버가 하나의 URL에서 다른 URL로 경로를 다시 라우팅할 수 있습니다. 리디렉션을 사용하는 일반적인 이유는 다음과 같습니다. URL의 모양을 사용자 지정하고 링크가 끊어지지 않도록 하며 주소를 변경하지 않고 앱이나 사이트의 호스팅 위치를 이동하고 요청된 URL을 웹 앱에 필요한 형식으로 변경합니다.
      리디렉션 사용
      https://docs.aws.amazon.com/ko_kr/amplify/latest/userguide/redirects.html
      How to enable mixed content in my browser | Adobe Target
      Mixed content occurs if the initial request is secure over HTTPS, but HTTPS and HTTP content is loaded to display the web page. HTTPS content is secure. HTTP content is insecure. Modern browsers might block the display of a page or display warning messages if secure content is mixed with insecure content.
      How to enable mixed content in my browser | Adobe Target
      https://experienceleague.adobe.com/docs/target/using/experiences/vec/troubleshoot-composer/mixed-content.html?lang=en
      How to enable mixed content in my browser | Adobe Target