개발 및 배포 환경(클라이언트) -> 서버 쿠키 전송 문제

🔥 문제 상황

이전 글에서 서버 → 클라이언트(localhost)로 쿠키 전송 문제를 해결했었다

그런데 클라이언트 → 서버로 POST 요청을 보냈는데 쿠키가 전송되지 않고 있었다.

 

왜냐하면 서버(https://custom-domain.com)에서 생성한 쿠키의 도메인은 [ custom-domain.com ] 이고, 클라이언트 도메인은 [ localhost ] 로 같은 도메인이 아니기 때문에 전송되지 않았던 것이다. (+ SameSite: Lax)

 

로그인 인증을 구현하기 위해선 도메인을 일치시킬 필요가 있었다.

✅ (개발 환경) 백엔드 서버를 로컬에서 띄우자

개발 환경에서 위 문제를 해결하기 위해 백엔드 서버를 로컬에서 띄우기로 했다. 그러면 클라이언트는 http://localhost:5173 이고, 서버는 http://localhost:8080이 될 것이다.

 

서버(http://localhost:8080)로 api 요청을 보내 쿠키가 생성되면 클라이언트(http://localhost:5173)로 전달된 쿠키의 도메인은 [ localhost ] 가 된다. 이제 도메인이 일치하기 때문에 GET, POST 등 모든 요청에 대해 클라이언트 → 서버로 쿠키가 전송된다.

 

✅ (배포 환경) 서브 도메인 설정

기존 프론트 도메인이 [ front-service.com ]이고, 백엔드 서버 도메인이 [ custom-domain.com ] 이면 같은 도메인이 아니기 때문에 쿠키 전송이 안 될 것이다. 그래서 프론트와 백의 도메인을 일치시켜야 한다.

 

기존의 서버 도메인 [ custom-domain.com ] 을 사용자들이 서비스에 접속할 수 있는 주소로 변경하고, 서버는 서브 도메인을 적용해 [ api.custom-domain.com ] 으로 변경했다. 추가로 api.custom-domain.com 서버에서 생성한 쿠키는 api.custom-domain.com 에서만 유효하기 때문에 쿠키의 domain 속성 domain=custom-domain 을 설정해줘야 한다.

 

하지만 최신 브라우저로 확인해보면 별도의 domain 속성을 지정하지 않아도 도메인과 서브도메인간 쿠키 전송이 잘 되고있다.  (파이어폭스는 저장된 쿠키가 보이지는 않지만 api 요청 시, 쿠키가 잘 전송되고 있다.)

 

서브 도메인
서브 도메인은 도메인 이름 앞에 붙는 추가적인 식별자이다. 
api.example.com, m.example.com, admin.example.com 등 모두 example.com 도메인의 서브 도메인이다.

 

쿠키 domain 속성

- 도메인 속성 지정하지 않았을 때
기본적으로 쿠키가 설정된 서버의 도메인에만 적용됩니다. ex) api.example.com에서 생성된 쿠키는 api.example.com에서만 유효하고, example.com 및 다른 서브 도메인에서는 전송되지 않습니다.
(최신 브라우저에서는 지정하지 않아도 쿠키 전송이 되는거 같습니다.)

- 도메인 속성 지정
domain=example.com 으로 설정하면 example.com 및 다른 서브 도메인에서도 쿠키가 전송됩니다.