쿠키 서버로 전송하기: credentials (문제 해결)

개요

개발중인 서비스에서 로그인과 로그인 연장 기능(JWT 토큰 갱신)을 구현하고 있었다. access token의 만료기간은 10분이었기 때문에, 페이지가 새로고침 될 때와 9분에 한번씩 access token의 갱신이 필요한 상황이었다. access token은 response header에, refresh token은 http only 쿠키에 설정되어있는 상태이다.

문제 상황

아래와 같은 코드로 fetch 요청을 작성했지만, 서버로부터 500 에러가 반환되었다.

  refresh: async () => {
    const accessToken = tokenManager.getToken();
    const res = await fetch(`${API_URL}/reissue`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        access: `${accessToken}`,
      },
    });

500 에러는 서버 내부의 문제이기 때문에, 클라이언트 측에서 원인을 찾는 것이 쉽지 않았다.

원인

에러의 원인을 찾기 위해 백엔드 개발자와 대화를 많이 나누었다... 서버 로그를 분석한 결과, refresh 요청 시 refresh token이 누락된 것을 확인할 수 있었다. refresh token은 서버에서 쿠키로 관리되는데, 클라이언트에서 요청을 보낼 때 쿠키를 포함하지 않아 인증에 실패한 것이 문제였었던 것이다.

해결 과정

문제를 해결하기 위해 fetch 요청에 credentials: "include" 옵션을 추가한 코드를 작성했다. 수정된 코드는 다음과 같다.

  refresh: async () => {
    const accessToken = tokenManager.getToken();
    const res = await fetch(`${API_URL}/reissue`, {
      // 추가된 부분
      credentials: "include",
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        access: `${accessToken}`,
      },
    });

credentials을 적용한 후 요청을 다시 시도했을 때, 500 에러 없이 성공적으로 요청이 처리되었다.

결론

쿠키를 전송해야하는 서버 통신 요청에서 credentials 옵션을 추가하지 않아 500 에러가 발생한 문제를 해결하는 과정을 겪었다. refresh token이 http only 쿠키로 설정되는 방식의 로그인 기능은 전에도 구현해봤었는데, 그때는 다른 개발자가 axios instance에 credentials설정을 해놨었다. 그래서 이렇게 쉽고 간단한 문제의 원인을 빠르게 파악하지 못했었던 것 같다. 더 공부해야지.. ㅠㅠ