프론트엔드 서버 - 웹서버 - 백엔드 서버 간 도메인 불일치 상황에서의 쿠키 통신 에러

문제 인식

로컬에서 테스트할 땐 크롬 브라우저에서 쿠키가 잘 도착하는 것을 확인한 후 https로 배포를 진행했습니다.

그런데 로컬에선 잘 도착하던 쿠키가 배포 환경에서는 도착하지 않는 문제가 발생했습니다.

 

문제 파악

서버 배포 환경

• 프론트엔드 서버: React와 Next.js를 사용, Vercel 서버에 배포, https
• 웹서버: Nginx를 사용, EC2 인스턴스 서버에 배포, https
• 백엔드 서버: Spring Boot를 사용, EC2 서버에 배포, http     (웹서버와 다른 EC2 인스턴스 서버에 배포)

쿠키 설정

• HttpOnly
• Path("/")
• Secure
• MaxAge
• SameSite("None")
• Domain(".example.com")     (당시에 example.com은 웹서버의 메인 도메인)

구글 서칭과 Chat GPT에서 알아본 결과, Vercel에서 만들어준 도메인이 example.com과 아예 다른 도메인이라 쿠키의 Domain 설정 때문에 쿠키를 도착하지 못하는 문제임을 파악했습니다.

 

문제 해결

다른 팀원의 정보를 통해 Vercel 서버를 example.com의 서브 도메인으로 등록하는 방법이 있음을 알게 되었습니다.

그래서 DNS 설정에서 A 레코드를 추가하여 Vercel 서버의 IP를 example.com의 서브 도메인으로 등록하였습니다.

그 후, 다시 시도한 결과 https 환경에서도 쿠키가 잘 도착하는 것을 확인했습니다.