[NEXT] Client Side에서는 API통신이 되는데 Server Side에서는 안됐는 이유

Next.js 프로젝트를 진행하는 도중 난관에 부딪혔다,

apis/ 폴더에서 동일한 Axios 함수를 호출하였는데 Client에서는 올바른 요청이 갔고, Server side에서는 axios에러가 발생하였다.

같은 함수 다른 결과

ServerSide에서 이미 API통신 했었고, 이 에러가 났을 당시 우리 백엔드 서버의 이슈가 발생했었기 때문에 그것과 관계돼 있다고 생각했다.

하지만, 역시 프론트엔드의 문제였고 생각보다 단순한 이유였다.

먼저 우리의 Axios를 보면 로그인된 유저의 기본 헤더 값은 쿠키에서 가져온다.

const AXIOS = axios.create({
  baseURL: "",
  headers: {
    "Content-Type": "application/json",
  },
  // withCredentials: true,
});

AXIOS.defaults.headers.common["Authorization"] = `${getCookie("token")}`;

export default AXIOS;

 

그렇다. 서버에서 브라우저의 쿠키를 같은 로직으로 사용하는 것은 당연히 불가능하다.

우리가 사용하는 쿠키라이브러리인 cookies-next에서는 ServerSide에서 쿠키를 사용하기 위해서는 req, res가 필요하다.

문제의 원인을 찾아서 이 에러를 피할 방법은 생겼지만 아직 완전히 해결하지는 못했다.

export const getServerSideProps: GetServerSideProps =
  wrapper.getServerSideProps(store => async ({ req, res }) => {
    const temp = await axios({
      url: "",
      method: "GET",
      headers: {
        Authorization: getCookie("token", { req, res }),
      },
    });


    return {
      props: {},
    };
  });

 

axios를 하나의 파일로 관리하여 코드를 정리하고 싶었지만, ServerSide에서 쿠키가 필요한 요청을 보낼 때  위와 같이 axios함수를 새로 작성하는 방법밖에 생각해내지 못했기 때문이다.