이성은·2023년 4월 25일

들어가기 전에..

이력서를 한참 거의 다 쓰고, 멘토님의 조언대로 https로 배포를 수정하고, 기능을 확인할 겸..정말 오랜만에 메인프로젝트 링크로 접속을 했다.
부트캠프를 수료한 이후에 이력서 작성 때문에 바빠기도 했고, 분명 프로젝트 데모데이까지 기능을 수십번을 확인했었기 때문에..? 이후에 배포한 링크로 접속하지 않았다.에러가 뜰거라고는 정말..생각치 못했는데..? 주요기능인 CRUD에 에러가 떴다..
처음에는 댓글 작성 조차 500번 에러가 났다..? 이무슨..?😱😱

바로 벡엔드 분들께 연락을 했고, 백엔드 분께서 프리티어 용량 문제라고 하셨고, ec2 스토리지를 좀 늘리고 서버 재실행 했다 하셔서 부랴부랴 기능을 확인하니 에러가 안떠서, 정말 안도의 한숨을 쉬었다.

하지만.. 다른 아이디로 로그인을 하니, 다른 아이디로 로그인하자마자, 약국찜하기와 댓글 수정, 삭제에서 400번 에러가 떴다.😈
=> 콘솔을 확인하니 분명 헤더에 토큰이 들어있는데..심지어 데모데이 이후에 백엔드 분들도, 프론트분들도 아무도 코드에 손을 댄적이 없었다.
=> 내가 로그인 회원가입 로그아웃 회원탈퇴를 맡기도 했고, 팀원인 은정님과 CRUD도 같이 기능구현을 했다. 분명 데모데이 전에 기능 확인할때, 오바를 조금 보태서 50개이상 아이디로 회원가입부터 CRUD를 확인했는데.. 뭐가 문제일까..?

에러의 원인 💩

Request Headers를 확인해보니 처음 아이디를 로그인해서 토큰이 필요한 axios요청을 하면 에러는 안나고, 아이디를 바꿔 로그인해서 토큰이 필요한 axios요청을 하니 이전 아이디의 토큰이 들어와서, 댓글수정, 삭제에 에러가 뜨는 것이다. (자신이 쓴 댓글만 수정,삭제 할수 있기때문에 토큰의 유무 뿐 아니라 그 유저의 토큰인지도 정보를 확인하는 로직이 추가 되어 있다.)
=> 구글링을 해보니 캐시문제 일수 있다고 해서 캐시에 대해 해결해 보기로 했다.

시도한 것 1) Cache Control

axios 헤더에 Cache Control를 사용하여 no-store값을 줘서, 클라이언트 요청 혹은 서버 응답에 관해서 어떤 것도 캐시 저장하지 않게 설정

//기존 코드
const BaseInstance = axios.create({
  baseURL: import.meta.env.VITE_APP_API_URL,
  headers: {
    Authorization: token,
  },
});

//Cache Control를 사용
const BaseInstance = axios.create({
  baseURL: import.meta.env.VITE_APP_API_URL,
  headers: {
    Authorization: token,
  'Cache-Control': 'no-store',
        Pragma: 'no-store',
        Expires: '0',
  },
});