[Next.js] Rewrites

 

 

프로젝트를하며 API를 통해 로그인 요청을 테스트하던 중 다른 API들은 정상적으로 호출이 되는데 로그인 부분만 CORS가 발생하여 이후 진행이 안되던 상태였다.

 

백엔드쪽에서 바로 처리가 안되기도 했고 일단 개발 진행을 위해 크롬 확장 프로그램을 사용하여 해결을 해보려 했지만 해결이 되지 않아서 프론트쪽에서 proxy를 사용해보기로 했고,  rewrites로 대체할 수 있다는걸 알게되어 글을 작성하게 되었다.

 

 

Rewrites

rewrites는 프록시 역할을 해주기도 하고 요청으로 들어온 경로를 다른 경로로 보내줄 수도 있다.

 

Next.js rewrites

 

axios 요청

export const getUerInfo = () => {
  return axios.get('/user');
};

 

 

next.config.js

const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/user',
        destination: '[요청을 보내려는 URL]/user',
      },
    ];
  },

 

rewrites 함수를 작성하고 source에는 axios에서 호출하는 path부분만 작성하고

destination에는 실제로 요청을 보내려는 URL을 작성한다.