문제
카카오 로그인 방식은 REST API 방식으로 진행을 하였다.
카카오 api 공식문서에서 제공해준 방법으로 백엔드에서 인가 코드와 토큰을 받고,
프론트에 넘겨주는 방법으로 진행을 하였다.
그런데 여기서 문제가 생겼다.
프론트 배포 주소는 vercel로 배포하여 배포주소.vercel.app이었고,
백엔드 배포 주소는 배포주소.click으로 서로 다른 도메인 으로 쿠키를 전달 받아야했었다.
며칠간 검색을 하고서 알게 된 사실은 "웹 브라우저는 도메인 단위로 쿠키를 관리하며, 서로 다른 도메인끼리는 쿠키 공유가 불가능하다"는 것이었다.
💻방법1
먼저 프론트와 백의 도메인을 맞추기로 하였다.
프론트 배포 주소: frontend.배포주소.click
백엔드 배포 주소: backend.배포주소.click
이후 백엔드에서 쿠키를 frontend.배포주소.click으로 전달했더니 값이 잘 오질 않았다.
💻방법2
백엔드에서 frontend.배포주소.click으로 쿠키를 전달했던걸 배포주소.click에 전달하는 방법으로 코드를 변경하고, 다시 실행했더니 이번에는 프론트에 쿠키가 잘 받아와졌다!
왜❓
frontend.배포주소.click으로 쿠키 전달은 안되고,
배포주소.click으로 쿠키 전달은 잘 된걸까?
"쿠키는 도메인이 같더라도 서브 도메인끼리는 공유가 불가능하다" 라는 것이다.
상위 도메인으로부터 서브 도메인으로 쿠키 전달은 가능하지만
frontend.배포주소.click과 backend.배포주소.click같이 서브 도메인이 다른 도메인끼리는 아예 다른 도메인으로 취급을 해버린다. 그렇기 때문에 방법1은 실패했던 것이다.
