redirect시 query parameter가 사라지는 문제

시나리오

프론트는 React를 사용했고 AWS Amplify에 배포했고
백엔드는 NestJs를 사용했고 AWS ECS를 통해 배포했다.

프론트에서 카카오 로그인을 위해 /auth/kakao로 백엔드에 접속하고, 로그인을 위해 다음과 같은 과정을 거친다.

  1. 카카오 로그인 페이지로 Redirect 시킨다.
  2. 로그인 완료 후 카카오는 Redirect URL(backend.com/auth/kakao/redirect)로 사용자를 Redirect 시킨다.
  3. 백엔드는 카카오로부터 받아온 유저정보를 조회해서 새로운 토큰을 만들고, 프론트에 전달하기 위해 프론트 서버 URL 뒤에다가 Query parameter로 토큰값을 붙여서 Redirect 시켜준다.

    ex) front.com/auth/kakao/redirect?access_token=<토큰값>

  4. 프론트는 해당 값을 파싱하여 LocalStorage에 저장한다.

문제점

시나리오 3번 과정에서 백엔드에서 프론트로 토큰값을 붙여서 Redirect 시켜주는 과정에서 프론트에서 Query parameter가 없어지는 문제가 발생하였다.

image

마지막에서 두번째 줄에서 성공적으로 access_token이 들어오나 밑에서 다시 Query parameter가 없어진 상태로 리디렉션이 일어나는걸 볼 수 있다.

삽질

원인 파악을 위해 크롬 개발자 도구에서 네트워크 탭을 통해 거쳐온 URL들을 알아볼 수 있었다.
실제로 토큰값을 포함한채로 Redirect front.com/auth/kakao/redirect?access_token=<토큰값> 되는데 다음 과정에서 front.com/auth/kakao/redirect 로 토큰값이 사라진채로 Redirect 되는걸 볼 수 있었고 또한, 로컬에선 잘 돌아가다가 배포 환경에서만 Query parameter가 사라졌다. 다음과 같이 원인이 될만한 요소를 나열해 보았다.

1. React 문제인가?

처음엔 React 문제인가 싶어서 자료를 찾아봤는데 해당 이슈가 발생한 사람이 별로 없었다.
React에서 문제가 발생 해봤자 사용하고 있는 react-router-dom 라이브러리에서 발생하겠다 싶어 해당 라이브러리를 비활성화 시키고 배포해보았다. 직접 front.com/auth/kakao/redirect?access_token=<토큰값>에 접속해봤을때 토큰값이 사라진걸 보아 React 문제는 아니란게 확신이 들었다.

2. Amplify 문제인가?

가장 의심스러웠지만 가장 아니였으면 하는 문제였다. 로컬 환경과 배포 환경에서의 다른점은 Amplify 밖에 없었기 때문에 가장 의심스러웠다. 자료를 찾아보니 나와 정확히 일치하는 이슈를 찾아볼 수 있었다.
Pass url params in rewrites and redirects #97
해당 글은 aws amplify에서 자체적으로 query를 날려버린다는 이슈였다.

amplify에서는 아래와 같이 redirect 정책을 설정할 수 있다.

image

여기서 query parameter를 전달할 수 있도록 설정할 수 있을것 같애서 공식 문서를 읽어보니

image

Amplify는 다음과 같은 예외 사항을 제외하고는 Query parameter를 모두 포워딩 해준다.

  • 기존 주소에서 query string이 특정 값으로 지정될 때, amplify는 특정 query parameter만 포워딩 한다.
  • 소스 주소가 일치하는 대상 주소에 query parameter가 포함될 때, 즉 사용자가 명시적으로 query string을 작성했을 때 query parameter는 포워딩 되지 않는다.

해결 방법

기존 Amplify 다시 쓰기 및 리디렉션 설정은 다음과 같이 되어있었다.

[
  {
    "source": "https://wooyeons.site",
    "target": "https://www.wooyeons.site",
    "status": "302",
    "condition": null
  },
  {
    "source": "/<*>",
    "target": "/index.html",
    "status": "404-200",
    "condition": null
  }
]

다시 문제점 섹션에 네트워크 추적 사진을 보니
wooyeons.site에서 www.wooyeons.site로 포워딩 된다는 사실을 알 수 있었다.
근데 Amplify Query 정책을 보았을 때 포워딩이 되어야하는거 아닌가?? 라는 의문점이 생겼다.

공식 문서를 좀 더 읽어보니 SPA용 Redirect 설정 값을 찾을 수 있었다.

image

다음과 같이 Redirect 설정을 해주니 해결되었다.

[
  {
    "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
    "target": "/index.html",
    "status": "200",
    "condition": null
  }
]
마지막 수정일: