[cookie]쿠키가 발급되지 않을 때 해결 방법 (401 Unauthorized Error)

쿠키가 전달되지 않을 때 (401 Unauthorized Error)

💡 문제 상황

• 회사에서 관리자 페이지를 S3 + CloudFront 이용해 배포한 상태에서 관리자 페이지에 로그인을 진행했는데, 네트워크 상태는 status 200으로 정상 작동 하였으나, 그 이후 대시보드 페이지로 넘어가지 못하고, 계속 로그인 페이지로 돌아오는 현상이 발생하였다.

• 백엔드 개발자님과 소통해보니, 서버에서 쿠키를 발급 받지 못해 로그인 하지 않은 사용자라 판단하는 상태라는 것을 알게되었다. 때문에 프론트 측에서도 로그인한 사용자라고 받아들이지 않고 계속 로그인 페이지로 돌려보냈던 것이다.

• 그래서 알아보던 중 백엔드와 프론트 모두 코드에서 withCredentials 속성을 on으로 설정해주어야 한다는 것을 발견하였다.

const instance = axios.create({
  baseURL: 'url 주소',
  // 추가한 코드 !!
  withCredentials: true,
});

• 곧바로 소스코드에서 fetch 기능을 담당하는 컴포넌트의 코드에서 withCredentials: true 속성을 추가하였다.

  • axios 는 기본적으로 withCredentials 속성의 기본값을 false로 가지기 때문에 따로 설정을 추가해줄 필요가 있다.

• 해결 방법 적용 후 다시 빌드 한 뒤 배포하니 로그인이 정상적으로 동작함을 확인하였다. (정말 다행이다,,)

💡 도움을 주신 글,,
쿠키가 발급되지 않을 때, Access-Control-Allow-Origin 오류 해결 방법