로그인 요청 보냈는데 왜 401(unAuthorized) 뜨지?

🔗 문제 발생 배경

1. 기존에 스웨거에서 임시로 발급받은 토큰으로 작업을 하다가 로그인을 연동하게 되었고, 로그인을 하면 토큰이 쿠키에 저장되는 방식이었음
2. 분명, 로그인 API 연동도 잘 되었고, 스웨거에서 API도 멀쩡하게 잘 동작했음
3. 그런데 로컬에서 로그인을 하면 401(unAuthorized) 로그가 찍힘

---

🔗 문제 발견

• 로컬에서 프로토콜로 http를 사용중이었고, 로그인 시 발급되는 accessToken과 refreshToken이 쿠키에 저장됨
• 스웨거에서 동작을 잘하는걸 보면 서버쪽에 문제가 있는 것은 아니라고 생각함
• 반면에, 401이 찍히는걸 보면 토큰 발급이 제대로 되고 있지 않다고 봤음
• 그래서 쿠키로 토큰을 관리하는 것에 대해 찾아보던 중 헤더를 통해 쿠키를 전달할 때 Secure 설정이 되어있다면 https로 통신하는 경우에만 쿠키를 저장해준다는 것을 발견
• 실제로 담당하고 있던 백엔드 동료에게 물어보니 보안을 위해 그런 설정을 해뒀다는 것을 확인함

---

🔗 해결책

• 문제 발견하는건 꽤 오래걸렸는데 해결책은 생각보다 간단했다.
• 그냥 http로 통신하고 있던걸 https로 변경만 해주면 됨

---

필자는 Vite+React로 프로젝트를 진행중이었기에 Vite+React를 기준으로 해결책을 보여주겠습니다.

 

로컬 환경에서 https를 사용하려면 ssl 인증서가 필요하다고 함

자체 서명된 SSL/TLS 인증서를 생성하는 도구인 mkcert를 통해 인증서를 발급해주면 됨

 

🧩 mkcert 설치법

Mac의 경우

brew install mkcert

 

Window의 경우 - Chocolately를 설치해준후 아래 명령어를 수행

choco install mkcert

 

mkcert 설치가 완료되면 프로젝트의 루트로 이동해 아래 명령어를 수행하여 로컬에 CA 인증서를 생성

mksert -install

 

이후 아래 명령어를 입력하면 로컬 기준으로 간단하게 키 파일을 생성함

mksert localhost

 

 

🌱 이렇게 확장자가 .pem인 파일이 2개 생긴거면 제대로 발급됨

 

🧩 이제 모든 준비는 끝나고, https로 실행되게 Vite를 설정하면 됨

아래와 같이 https 설정을 해주는 코드를 vite.config.js에 추가해줌

 

필자는 로컬에서 프로젝트 실행 설정을 아래와 같이 해놨고, npm을 사용중이므로 npm run dev를 입력해 실행함

 

 

✨ 성공!

---

✈️ 출처

[React] localhost https 설정하기

HTTP 쿠키와 보안