프로젝트 개요 📚
이번 프로젝트에서는 소셜 로그인 이후 백엔드에서 리프레시 토큰을 쿠키로 전달하고,
프론트엔드에서는 해당 쿠키를 사용해 액세스 토큰을 재발급 받는 구조를 도입했습니다.
하지만, 기대와 달리 쿠키가 제대로 저장되지 않는 문제가 발생했고,
브라우저의 Application 탭에서도 쿠키가 보이지 않는 현상이 나타났습니다.
초기 개발 환경 🛠️
- 프론트엔드:
http://localhost:5173 - 백엔드:
https://vecoservice.shop
프론트와 백엔드의 도메인이 다르기 때문에 브라우저는 Cross-site Cookie 제한 정책을 적용합니다.
특히,SameSite속성이Lax또는Strict일 경우, 다른 도메인 간 쿠키 전달이 차잔되어 도메인이 다를 경우SameSite=None을 설정이 필수입니다.
SameSite=None + Secure 설정 시도 🔐
문제 해결을 위해 백엔드에서 아래와 같은 쿠키 설정을 적용했습니다.
Set-Cookie: refresh_token=...; Path=/; HttpOnly; Secure; SameSite=None;하지만, Secure 속성이 있을 경우, HTTPS 가 아닌 환경에서는 쿠키가 저장되지 않기 때문에,
프론트엔드도 https://localhost:5173 환경으로 전환해야 했습니다.
👉로컬에서 HTTPS로 실행하는 방법
그래도 쿠키가 저장되지 않았다?! ❌
Secure와 SameSite=None 설정을 모두 적용했음에도 여전히 쿠키는 저장되지 않았습니다.
그 이유는, 도메인의 최상위가 다르면 브라우저는 쿠키를 차단하기 때문입니다.
즉, localhost와 vecoservice.shop은 서로 다른 도메인이므로 쿠키가 전달되지 않습니다.
해결책 - 프론트 도메인 변경 ✅
결국 도메인을 일치시키기 위해 프론트엔드 주소를 https://web.vecoservice.shop으로 변경하여,
백엔드(vecoservice.shop)와 동일한 최상위 도메인을 공유하도록 했습니다.
👉 이렇게 하면 Cross-site 제약 없이 쿠키를 자유롭게 주고받을 수 있습니다.
Vercel 도메인 설정 변경 ✅
프론트엔드는 Vercel로 배포하고 있었기 때문에, 도메인 변경도 Vercel에서 진행했습니다.
-
Vercel 프로젝트의
Settings > Domains로 이동 -
Add Domain 버튼 클릭 후 새 도메인 입력
-
처음에는 Invalid Configuration 에러가 발생합니다.
이는 아직 가비아 DNS 설정에 CNAME 레코드가 등록되지 않았기 때문입니다.
-
가비아 DNS 설정에 접속해, Vercel이 제공한 CNAME 레코드 값을 등록해줍니다.
(Vercel에서 CNAME 값은 위 이미지의Learn More버튼을 클릭하면 확인 가능) -
DNS가 전파되면, Vercel에서 도메인이 Authorized 상태로 변경됩니다.
-
이후 기존 도메인의
Edit버튼을 눌러, 새 도메인으로 Redirect 설정을 추가해줍니다.
결론 🍪
처음에는 SameSite=None과 Secure 속성을 적용하면 해결될 줄 알았지만,
결국 도메인이 다르면 브라우저가 쿠키를 차단하기 때문에 문제가 지속된다는 것을 확인했습니다.
최종 해결책은 프론트와 백엔드 도메인을 동일한 최상위 도메인 하에 배치하는 것이었고, 덕분에 쿠키도 정상적으로 저장되며 액세스 토큰 재발급도 문제 없이 이루어졌습니다.
