NEXT.js reverse proxy

짜증나는 CORS 정책을 Reverse Proxy 로 우회해보자.

Next.js로 만든 프로젝트 최상위 루트에 next.config.js 파일을 하나 만들어두자.

module.exports = {
  reactStrictMode: true,
  async rewrites() {
    return [
      {
        source: "/:path*",
        destination: "http:/주소/:path*", // Proxy to Backend
      },

      {
        source: "/다른주소:path*",
        destination: "http://다른주소/:다른주소*", // Proxy to Backend
      },
    ];
  },
};

여러개의 주소를 만들어서 프록시 우회를 할 수 있다. axios 모듈을 만들고 위의 주소와 매핑을 하자.

import Axios from "axios";

const client = Axios.create(); //사용자 정의 구성을 사용하는 axios 인스턴스 생성
const client2 = Axios.create(); 


client.defaults.baseURL = ""; // 이게 위의 첫번째.   source: "/:path*", 와 매핑.
client2.defaults.baseURL = "/다른주소"; 

// 글로벌 설정 참고: https://fkkmemi.github.io/nemv/nemv-053-axios-interceptor/
client.interceptors.request.use(
  request => {
    // console.log("Starting Request", request);
    return request;
  },
  error => {
    //요청 실패시 뭐 할지
    return Promise.reject(error);
  }
);
//응답 인터셉터 추가
client.interceptors.response.use(
  response => {
    //요청 성공 시 특정 작업 수행
    // console.log(response);
    return response;
  },
  error => {
    //요청 실패 시 특정 작업 수행
    console.error("error는: ", error);
    return Promise.reject(error);
  }
);

export default client;

참고: https://velog.io/@maliethy/nextjs-reverse-proxy%EB%A1%9C-cors%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0