[Nuxt3] $fetch에서 HttpOnly Cookie 서버로 전달하기

이번 프로젝트에서는 JWT를 이용한 로그인을 구현하였다. (백엔드 프론트 내가 다)
그런데 AccessToken을 재발급 해주기 위한 RefreshToken을 HttpOnly 옵션을 준 쿠키로 저장하였는데, 처음으로 HttpOnly 쿠키를 사용하다보니 어떻게 서버로 전달해줘야할지 몰라서 많이 헤맸다...

axios도 Vue2와 Vue3 에서 모두 사용해보았지만 서버 쿠키를 다뤄본적이 없어서 더욱 헤맸던 것 같다..

아무튼 HttpOnly 옵션이 적용된 쿠키를 Nuxt3의 $fetch를 통해 클라이언트에서 서버로 전달하는 방법은 간단하다.

const refreshAccessToken = await $fetch('url' , {
  credentials: 'include',  // <== 이 옵션을 주면 된다. 
  method: 'POST',
  body : bodyData,
  ignoreResponseError: true
});

[credentials] 옵션은 총 3가지의 옵션을 제공한다.

1. same-origin: 같은 출처의 요청에만 인증 정보를 담을 수 있다
2. include: 모든 요청에 인증 정보를 담을 수 있다
3. omit: 모든 요청에 인증 정보를 담을 수 없다

나는 우선 include로 설정하고 진행하였지만
반드시 본인의 개발 환경과 실제 운영 환경의 origin을 고려하여 설정해야한다.