개발일지 63일차

post요청시 400 bad requst 트러블 슈팅

첫번째 에러

• 클라이언트에서 axios로 데이터 요청할때 서버로 보내는 데이터의 key 형식이 맞지않아 key를 맞추고 다시 진행
• 아래 서버 형식으로 axios 요청

두번째 에러

• 클라이언트에서 보내준 refreshtoken의 값이 토큰 값만 넘어왔기 때문에 토큰을 검증하는 미들웨어에서 refresh토큰을 검증하지 못하고 null 값을 계속해서 할당함
• 아래코드에서 null 값을 계속해서 할당했고, refreshtoken이 null 값이었기 때문에 db에 저장될때도 userId = null로 create시도 됨, models 파일에서 userId의 제약조건을 null을 허용하지 않았기때문에 에레 발생
• 세번째 에러와 이어지는 에러

  if ((!refreshtoken) || (authAccessType !== "Bearer" || !authAccessToken)) {
            res.locals.user = { userId: null }; // 가짜 사용자 객체를 만듭니다
            return next(); // 다음 핸들러로 이동
        }

세번째 에러

- 클라이언트에서 보내주는 리프레쉬토큰 형식과 서버에서 받는 리프레쉬 토큰의 형식이 맞지 않아서 토큰을 받지 못함

수정전

• 클라이언트에서 accesstoken과 refreshtoken을 객체에 담아서 보내줌
• autorization이라는 키값에 할당하지 않고 accesstoken, refreshtoken을 객체에 담아 보냄
• refreshtoken은 Bearer 타입을 할당하지 않고 토큰값만 보내기 때문에 refreshtoken을 구조분해 할당을 할 수 없지만 아래 코드에서는 구조분해 할당을 하기 때문에 undefined 를 할당함 그래서 419 에러를 반환

let { accesstoken, refreshtoken } = req.headers;

accesstoken = !req.headers.refreshtoken ? req.cookies.accesstoken : accesstoken;
refreshtoken = !req.headers.refreshtoken ? req.cookies.refreshtoken : refreshtoken;

const [authAccessType, authAccessToken] = (accesstoken ?? "").split(" ");
const [authRefreshType, authRefreshToken] = (refreshtoken ?? "").split(" ");

수정후

• refreshtoken을 할당 할 수 있도록 구조분해하는 부분을 제거함

let { accesstoken, refreshtoken } = req.headers;

accesstoken = !req.headers.refreshtoken ? req.cookies.accesstoken : accesstoken;
refreshtoken = !req.headers.refreshtoken ? req.cookies.refreshtoken : refreshtoken;

const [authAccessType, authAccessToken] = (accesstoken ?? "").split(" ");

느낀점

• 클라이언트에서 어떤 방식으로 토큰을 보내주고 있는지 타입을 잘 맞춰보고 코드를 작성해야함, 또한 받아온 토큰을 브라우저에 제대로 할당해주고 있는지도 확인해야함