[Nest.js] 쿠키를 받지 못하는 문제 (상용 서버)

개요

Front-End 서버와 Back-End 서버가 각각 vercel과 aws ec2 에 배포된 상황에서 

FE에서 로그인 하며 전달 받은 accessToken, refreshToken이 

BE로 요청을 보낼 때 헤더에는 담겨 전달되지만

정작 서버에서 받지 못하는 문제를 발견했다.

 

Controller

@Get()
async getMeetups(@Req() req: Request): Promise<Meetup[]> {
  console.log('cookie test: ');
  console.log(req.cookies);
}

테스트를 위해 기존에 get 요청으로 로그인 정보 없이 데이터를 반환하는 api에

위 코드를 추가해보았다.

 

local에서는 잘 받아지는게 확인됐으나

 

ec2에 배포한 서버를 바라보게 하자 헤더에 쿠키 전달은 하는데

 

서버쪽에서는 아무것도 받지 못하고 있었다.

 

하지만 Insomnia에서 요청하니 전달이 잘 됐다.

그럼 서버 문제도 아니라는 뜻.

 

비슷한 상황이 axios를 요청하며 withCredentials를 설정해주지 않았을 때 발생했었는데

그럼 지금은 저장하는 쿠키가 local에서의 환경에 적합하게 세팅되있어서 그렇다 라고 밖에 생각이 안든다..

 

해결 방법

팀원의 도움으로 같은 도메인이어야 쿠키가 전달될거라는 힌트를 얻었다.

기존에 https://chalkak.vercel.app 이었던 프론트엔드 도메인에서

AWS Route 53에서의 세팅으로 www.chalkak.site  서브 도메인을 열어 변경해줬고

document.cookie = `accessToken=${accessToken}; Domain=${process.env.REACT_APP_COOKIE_DOMAIN}; path=/;`;
document.cookie = `refreshToken=${refreshToken}; Domain=${process.env.REACT_APP_COOKIE_DOMAIN}; path=/;`;

이렇게 쿠키를 저장할 때도 Domain을 따로 세팅되게 하여

localhost일 때랑 상용 서버일 때랑 구분되어 쿠키를 저장하게 변경했다.

 

위 과정을 거치고 테스트해보니 드디어 정상적으로 백엔드 서버에서 쿠키를 받을 수 있었다!!

일단 내가 겪은 문제에서 막혔던 부분으로는

 

1. 사놓은 도메인인 chalkak.site에 대해 서브 도메인을 활용하는 방법을 몰랐던 점.

https 인증서를 만들며 백엔드 서버는 api.chalkak.site로 세팅했는데

프론트엔드 서버 도메인을 vercel에서 www.chalkak.site로 바꾸고 싶은데 이걸 

가비아에서 세팅하고 있었던게 컸다.

 

그냥 vercel에서 도메인 등록하고 발급받은 CNAME을 

Route 53에서 레코드로 등록해주니 끝날 일이었다.

 

2. 두 번째로는 지금까지 document.cookie를 통해 쿠키를 저장할 때

path 에 대해서만 세팅을 해줬었는데

domain에 대해서도 따로 세팅을 해줘야 된다는 걸 몰랐던 게 문제였다.

위 과정에서 도메인 주소를 맞췄고 root 도메인을 바라보게 세팅해줌으로 해결되었다.

 

정리

회사 다닐 때 했던 방식과는 전혀 달라 느낌만 알지 팀원의 도움이 아니었으면 오늘중으로도 안끝났지 싶다.

요즘 튜터보다 팀원한테 더 믿음직스러움을 느낀다.

 

나중에 회사 생활을 하더라도 나한테 이런 팀원이 있었으면 좋겠다.. 그 날이 올까