Codestates immersive course

First Project

정말 오랜만에 TIL 작성이다. 내가 이렇게 까지 TIL 작성이 오랜만인 이유는 당연히 프로젝트 덕분...

사실 프로젝트 시작하기 전에 가장 쉽게 봤던게 인증 과정이었는데 막상 적용을 하려니 제일 어렵고 까다로운 부분이었다.

특히나 크롬 80 버전 이후로 생기는 samesite 이슈를 해결하기 위해 https를 적용하고 또 https에서 쿠키 전송을 하기 위해서 secure 옵션을 주는데 그렇게하면 응답 헤더에서 set-cookie를 해주지 않는다....

우리는 express-session을 이용하기 때문에 쿠키 생성 및 전송은 필수 였는데 그 부분이 막혀버린 것이다.

구글링을 통해 통해 완벽한 해결책은 아니지만 trust-proxy를 설정해서 쿠키를 생성할 수 있게 만들어 주었다.

여기서 문제점은 첫번째 요청은 무조건 fetch를 사용해야 정상적으로 쿠키가 생성이 된다는 점.

따라서 axios로 첫 요청을 보냈을 때는 기존과 동일하게 응답헤더에서 set-cookie를 볼 수 없다.

또한 우리가 생각한 브라우저 (크롬, 사파리) 중에 사파리에서는 정상적으로 동작하지 않는다는 점이다.

사실 사파리에서 발생하는 문제점이 아직 trust-proxy 설정으로 발생하는 문제인지는 확실치 않다.

일단 프로젝트를 완성하기 위해서 이 방법을 사용했고 발생하는 문제점을 해결하기 위한 방법을 최대한 모색해봐야겠다.