Route를 이용한 쿠키 전달 방식(FrontEnd)

쿠키 기반 인증 전환 시 발생한 문제와 해결 과정

1. 문제 상황

기존에는 토큰을 localStorage에 저장한 후, 이를 Authorization 헤더에 포함하여 인증을 처리하고 있었습니다.
그러나 보안상의 이유로 쿠키 기반 인증 방식으로 변경하기로 결정하였고,
이에 따라 백엔드에서는 토큰을 쿠키에 저장하는 방식으로 인증 방식을 변경하였습니다.

이에 맞춰 프론트엔드에서는 API 요청 시 credentials: 'include' 옵션을 추가하여 쿠키를 함께 전송하도록 수정하였습니다.
하지만 예상과 달리 401 Unauthorized 에러가 발생하며 인증이 정상적으로 이루어지지 않는 문제가 발생하였습니다.

2. 원인 분석

1. CORS 설정 문제 가능성 검토

   • 쿠키 기반 인증을 사용할 경우, 백엔드에서 CORS 설정을 통해 credentials: true를 설정해야 합니다.
   • 하지만 백엔드로 직접 요청할 때는 정상적으로 인증이 이루어졌기 때문에, CORS 설정이 원인은 아님을 확인하였습니다.

2. API 요청 경로 확인

   • 프론트엔드는 Next.js의 API Route를 거쳐 백엔드로 요청을 보내고 있었습니다.
   • 그런데 API Route를 거칠 때만 쿠키 인증이 실패하는 문제가 발생하였습니다.

3. API Route에서 쿠키 전달 누락

   • Next.js API Route에서 클라이언트의 쿠키를 백엔드로 전달하는 과정이 빠져 있었음을 발견하였습니다.
   • 즉, 클라이언트 → API Route 요청은 쿠키를 포함하지만, API Route → 백엔드 요청에는 쿠키가 포함되지 않음으로 인해 인증이 실패한 것입니다.

3. 해결 방법

• API Route에서 클라이언트의 쿠키를 백엔드로 전달하도록 수정하였습니다.
• request.headers.get('cookie')를 이용하여 클라이언트에서 받은 쿠키를 백엔드로 넘기는 방식으로 변경하였습니다.

이제 쿠키가 정상적으로 전달되면서 401 오류 없이 인증이 정상적으로 작동하게 되었습니다.

4. 배운 점

1. 쿠키 기반 인증은 credentials: 'include' 설정만으로 충분하지 않다.

   • API를 프록시하는 경우, 중간 API(Route)가 클라이언트의 쿠키를 백엔드로 전달해야 함을 고려해야 합니다.

2. CORS 설정을 정확히 이해하고 적용해야 한다.

   • 백엔드에서 Access-Control-Allow-Credentials: true 설정이 필요하며,
     프론트엔드 요청 시 credentials: 'include'를 반드시 추가해야 합니다.

3. API Route가 반드시 필요한지 검토해야 한다.

   • 경우에 따라 프론트엔드에서 백엔드로 직접 요청하는 것이 더 효율적인 해결책이 될 수도 있음을 고려해야 합니다.

5. 결론

이번 문제를 통해 쿠키 기반 인증 방식으로 전환할 때 단순히 API 요청만 변경하는 것이 아니라, 전체적인 인증 흐름을 점검하는 것이 중요하다는 점을 깨닫게 되었습니다.
특히 Next.js API Route를 사용할 경우, 클라이언트에서 받은 쿠키를 백엔드로 전달해야 한다는 점을 반드시 고려해야 합니다.