nginx https시 cookie가 안 온다??

현상

캡스톤을 하던 도중 생긴 현상이다.
개발 환경에서는 잘 오던 cookie가 배포를 하고 난 뒤 오지 않았다.
나의 경우에는 프론트로 NEXT.js를 사용하고 있었고 백엔드는 express로 구현했다.
배포는 ncloud에 nginx를 사용하여 express를 배포한 상태였다.
localhost가 아닌 다른 도메인의 사이트끼리는 cookie를 주고 받으려면 https를 해야한다고 한다. 그래서 백엔드를 https 설정을 해주었다.

알고보니 프론트 또한 https를 해야한다고 한다. 양방향 https여야 하는 것이다. 그래서 NEXT 프로젝트를 배포 할 수 있는 서비스인 VERCEL을 사용하여 배포를 하였다. 자동으로 https가 적용되기 때문에 잘 될 줄 알았건만 웬걸 쿠키가 오지 않는다...

해결 법

그래서 찾아보았다. 크롬의 정책이 same-site가 기본 값이 'lax'로 바뀌어 같은 도메인의 사이트거나, 두 도메인 모두 https가 적용되어있고 cookie가 secure이며 same-site 설정이 'none'이어야만 쿠키를 주고 받을 수 있다고 한다. 그래서 express-session의 설정을 다음과 같이 해주었다.

app.use(
  expressSession({
    resave: false,
    saveUninitialized: false,
    secret: process.env.COOKIE_SECRET,
    cookie: {
      httpOnly: true,
      secure: process.env.NODE_ENV === 'development' ? false : true,
      sameSite: process.env.NODE_ENV === 'development' ? false : 'none'
    },
  })
);

secure 값이 배포일 때는 true로 바꾸어주고, sameSite 설정을 false로 하면 아무 설정도 하지 않아서 기본 값이 'lax'가 되므로 'none'으로 설정해주었다.
그리고 다시 확인해봤더니 안 된다..! 왜 안 되지 하고 찾아봤더니... nginx를 사용했다면 추가적인 설정을 해주어야 한다고 한다. nginx 설정에 proxy_set_header X-Forwarded-Proto $scheme;를 추가해주면된다.
관련 설정글

그렇게 추가를 해주고 나니 그래도 안 된다..!! ㅠㅠㅠ 그래서 찾은 게 express-session 설정에 proxy: true를 해줘야한다고 한다.
관련 stack overflow
그렇게

app.use(
  expressSession({
    resave: false,
    saveUninitialized: false,
    secret: process.env.COOKIE_SECRET,
    proxy: true,
    cookie: {
      httpOnly: true,
      secure: process.env.NODE_ENV === 'development' ? false : true,
      sameSite: process.env.NODE_ENV === 'development' ? false : 'none'
    },
  })
);

를 해주고 나니 에러 없이 쿠키를 잘 주고 받는 것을 볼 수 있었다. 그런데 신기하게 application - cookies에는 안 보인다??? 쿠키를 잘 주고 받기는 하는데 안 보이는게 이상하긴 하지만... 일단 잘 된다..!!