에러

post 요청을 해도 로그인 상태임에도 불구하고 로그인 하지 않았다고 하면서 계속 401에러가 발생하였다.

message(pin):"Request failed with status code 401"
name(pin):"Error"
stack(pin):"Error: Request failed with status code 401 at createError (http://localhost:3060/_next/static/development/pages/_app.js?ts=1585752629701:613:15) at settle (http://localhost:3060/_next/static/development/pages/_app.js?ts=1585752629701:874:12) at XMLHttpRequest.handleLoad (http://localhost:3060/_next/static/development/pages/_app.js?ts=1585752629701:82:7)"
url(pin):"/post/26/like"
method(pin):"post"
data(pin):"{"withCredentials":true}" <- 문제 해결의 실마리
baseURL(pin):"http://localhost:3065/api"
timeout(pin):0
xsrfCookieName(pin):"XSRF-TOKEN"
xsrfHeaderName(pin):"X-XSRF-TOKEN"
maxContentLength(pin):-1

공식문서 참고

Request method aliases

참고: axios - npm

For convenience aliases have been provided for all supported request methods.

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

NOTE

When using the alias methods url, method, and data properties don't need to be specified in config.

에러의 원인

axios.post(url[, data[, config]])는 두 번째 인자에 꼭 데이터를 넣어주어야 withCredentials 옵션을 사용할 수 있는데, 데이터를 서버로 보내지 않는다고 해서 두 번째 인자에 {}(빈 객체)도 넣지 않은 것이 원인이 되었다.

에러 코드

function likePostAPI(likePostId) {
  return Axios.post(
    `/post/${likePostId}/like`,{
      withCredentials: true,
    },
  );
}

위의 코드처럼 두 번째 인자에 withCredentials옵션을 넣고 post 요청을 하면 에러가 발생한다. 에러 메시지에서 다음과 같이 post 요청의 data에 withCredentials 옵션이 들어가 있는 것을 확인할 수 있다.

data(pin):"{"withCredentials":true}"

에러 수정 코드

function likePostAPI(likePostId) {
  return Axios.post(
    `/post/${likePostId}/like`, {빈 객체}, {
      withCredentials: true,
    },
  );
}

왜 실수를 하였는가?

axios.delete(url[, config]) 는 두 번째 인자에 데이터를 넣어주지 않아도 되었기 때문에, 데이터를 넣지 않는 요청은 같은 구성으로 코드를 작성해도 된다고 생각했다.

function unlikePostAPI(unlikePostId) {
  return Axios.delete(`/post/${unlikePostId}/like`, {
    withCredentials: true,
  });
}