[Next.js] Proxy Axios 설정

1. 개요

Axios를 사용해 Next.js서버가 아닌 다른 도메인으로 url을 요청할 때가 있는데, 이때 프록시 설정을 하지 않으면 CORS 오류로 인해 호출이 되지 않는 경우가 있습니다.

또한, React에서 package.json에 프록시를 명시한 것과 다르게 Next.js에서 Proxy는 조금 다른 방법으로 설정을 해야만 했습니다.

 

 

2. 코드

Axios 호출

  useEffect(() => {
    async function get() {
      try {
        const result: AxiosResponse<any, any> = await axios.post("/redis/visit");
        console.log(result.data)
        if (result) setVisitor(result.data)
      }
      catch (e) {

      }
    }
    get();
  }, []);

사용자가 페이지가 로딩될 때 api가 호출되게끔 하기 위해 useEffect에 동기적으로 api를 호출하는 코드를 작성했습니다.

 

next.config.js

module.exports = (phase, { defaultConfig }) => {
  const rewrites = () => {
    return [
      {
        source: '/redis/:path*',
        destination: "http://172.12.0.1:4949/redis/:path*",
      },
    ];
  }
  
  return { rewrites }
}

module.exports에 const rewrites 함수를 정의하고,

리턴하는 배열의 source에는 axios에서 호출하는 path 부분만 작성하며,

destination에는 실제로 접근해야할 URL과 포트를 포함해서 작성하면 됩니다.

 

next.js에서 초기에 설정해야할 값들이 많은데, 어떤 곳에서는 redirect를 써야한다, 함수를 호출하거나 변수로 먼저 선언한다던가, 다 시도를 해보아도 되지가 않았지만, 위 방법을 사용하니 잘 작동했습니다.

 

 

참고

https://www.edmondchuc.com/blog/next-js-development-proxy-server