프로젝트를 시작하면서 가장 많이 시달린 부분이 Auth 부분인 것 같다.
세션 로그인 부터 시작해서 OAuth 2.0 까지 골고루 맞고 있다.
그동안 쿠키라는 것은 요청을 보낼 때 당연히(??) 붙어서 나가는 것으로만 생각했다.
아마 내가 그동안 공부했던 환경이 localhost여서 그렇게 착각했던 것일지도 모르겠다.
로그인에 성공하고 쿠키가 들어온 것을 확인했는데 다시 요청을 보냈을 때는 서버에서 받은 쿠키가 없다는 말을 들었다.
나의 잃어버린 쿠키는 어디로 갔을까 고민하면서 구글링을 하던 찰나!
내가 놓친 두가지 맹점이 있었다.
1. axios option (withCredentials)
우선 내가 사용하고 있는 axios 같은 라이브러리는 기본적으로 다른 주소로 보낼 때는 쿠키를 전달하지 않는다.
만약 전달하게 하고 싶다면?{witdhCredentials = true}옵션을 axios에 추가하면 된다.
(백엔드 쪽은 access control allow origin에 정확한 주소 표시가 필요하다)
자! 그래서 해당 옵션을 추가하고 다시 시도하면 해결이 되었을까?
역시 해결이 안 되었다.
2. SameSite
크롬 80 이슈중에 SameSite 이슈가 있었다.
무슨 말인고 하니..
예전에는 SameSite 기본값이 None 이었기 때문에 주소가 달라도 쿠키를 보낼 수 있었지만,
80부터는 SameSite 옵션중에 'lax'라는 값을 기본값으로 하기 때문에 보낼 수가 없다..
'lax'는 일단 다른 주소면 쿠키를 보낼 수 없는데, 특정 조건에서는 허용해준다. (유저 편의성)
예를들어 get 요청은 쿠키를 보낼 수 있다. 하지만 post 요청은 불가.
따라서 SameSite를 기본값인 'lax'에서 'none'으로 바꿔줘야 하지만 Secure 설정을 해야지만
SameSite 옵션을 none으로 할 수 있다.
Secure 옵션을 설정한 쿠키는 https에서만 읽어들일 수 있기 때문에 부차적인 작업이 필요하다.
선택할 수 있는 옵션은 크게 세가지 정도가 된다.
- 도메인을 구매해서 클라이언트, 서버 주소를 일치시킨다.
개발을 할 때는 프록시 설정으로 테스트하고 배포했을 때는 같은 도메인으로 해결 - HTTPS를 적용하고 SamSite : none, Secure 설정을 하고 사용.
- 수동 동작 (직접 받아서 다음 요청 보낼 때 헤더에 넣어서 요청)
이번에는 3번을 사용하게 될 것 같다.
(도메인 살까?..)
