리액트에서 axios로 POST 요청할 때 401 오류 해결 후기(feat : object형 데이터 사용 오류)

ReactJS와 NestJS를 이용하여 프로젝트를 제작중인데

로그인 기능 구현 도중 오류를 만났다.

 

axios를 이용해 id정보와 password 정보를 서버로 post 했는데

브라우저에서 401 오류를 반환한 것이다.

오류 해결을 위해서 구글링을 진행했고 이런 저런 해결 방법들을 찾아 시도해보았지만

해결이 불가능했다.

---

1시간 가량을 삽질하던 중 object형 데이터에서 key와 value가 같다면

value만 적어도 된다는 글을 발견했다.

// 이 코드를
let body = { username: id, password: password };
// 이렇게 바꿀 수 있다.
let body = { id, password };

참고로  로그인관련 코드를 구글링하면서 만들고 있었는데

내 원래 코드는 아래와 같았다.

let body = { id, password };
axios.post("http://localhost:3000/auth/login", body).then((res) => {
  console.log(res.data);
});

그리고 NestJS를 이용해 구현한 서버에 저장된 유저정보는 아래와 같은 형태였다.

private readonly users = [
    {
      userId: 1,
      username: 'test',
      password: 'test',
    },

NestJS에서는 ReactJS에서 axios를 이용해 POST한 유저 정보를 받아서

서버에 저장된 유저 정보와 비교해야 하는데

ReactJS에서 보낸 유저 정보가 아래와 같이 일치하지 않았기 때문에 오류를 발생시켰던 것 같다.

// 정상적인 형태의 데이터
{
    username : test,
    password : test
}
// 내가 보낸 데이터
{
    id : test,
    password : password
}

구글에서 찾은 코드를 복붙하면서

이 코드에서는 왜 object형 데이터를 key값 없이 쓰지?

라는 생각을 했었는데

그게 내 1시간을 가져가버릴 줄은 꿈에도 몰랐다.

---

덧붙여서 401 에러는 권한이 없을때 발생하는 에러인데

처음에 401 에러를 만났을 때 나는

로그인도 안했는데 무슨 권한이 없다는거지?

싶어서 더 아리송했었다.

 

그런데 이제 보니 유저 정보에 오류가 있는건 둘째치고

ReactJS 에서 NestJS로 유저 정보를 성공적으로 전달했고,

NestJS 에서는 토큰을 발행해야 하는데

유저 정보에 오류가 있으니 토큰을 발행시킬 권한이 없기 때문에

권한 오류인 401 에러를 발생시킨 것 같다. 

---

어찌저찌 문제를 해결하고

다시 ReactJS에서 유저 정보를 POST 해보았다.

 

ReactJS로부터 NestJS에게 유저 정보가 정상적으로 POST 되면

브라우저의 console에서 아래와 같이 인증 토큰 정보를 확인할 수 있었다.