문제

Access to XMLHttpRequest at 'http://openapi.molit.go.kr/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcAptTradeDev?LAWD_CD=11110&DEAL_YMD=201512&serviceKey=6SzQxLY4S…..' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

국토교통부에서 제공하는 아파트매매 실거래 상세 자료 공공데이터 API를 불러오는 과정에서 CORS 에러를 마주했다.

해결

다행히 Next.js에서 제공하는 rewrites 기능을 이용해서 쉽게 해결할 수 있었다.

rewrites란?

rewrites속성은 요청 경로를 다른 목적지의 경로로 매핑해주는 설정 객체를 배열로 가지는 Next.js 의 설정 속성이다.

• source: String - is the incoming request path pattern.
• destination: String is the path you want to route to.

rewrites를 사용하는 경우

• 외부 API 통신을 할 때 Network에서 API Key를 숨길 수 있다.
• Next.js에서 외부 API를 호출할 때 발생하는 CORS 이슈를 처리하는데 사용한다.

module.exports = {
 async rewrites() {
    return [
      {
        source: "/api/APTRealPrice",
        destination: `http://openapi.molit.go.kr/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcAptTradeDev?LAWD_CD=11110&DEAL_YMD=201512&serviceKey=${API_KEY}`,
      },
    ];
  },
};

next.config.js 파일에서 rewrites 함수 안에 source와 destination을 작성한다.

const getAPTRealPriceList = async () => {
    await axios.get("/api/APTRealPrice")
      .then((res) => console.log(res.data));
};

실제로 API call을 할 때는 source의 URL을 이용하면 된다.