Next.js에서 CORS 에러 해결하기

Next JS 의 Client side 에서 API 호출할때 CORS 에러가 발생한다면.

백엔드에서 수정하기

원래대로라면 백엔드에서 해결해야 하는 문제이다.
서버에서 Access-Control-Allow-Origin 헤더에 유효한 값을 포함하여 응답을 보내주면 해결할 수 있다.

프론트에서 수정하기

---

Open API 를 사용하는 과정에서 CORS가 발생하게 되면 백엔드에서 수정할수가 없기 때문에 프론트 단에서 임시로 수정해야 한다.

next.config.js 에 rewrites 함수 추가

const nextConfig = {
  
  ...
  
 async rewrites() {
    return [
      {
        source: "/api/:path*",   /** 내가 새롭게 부를 API 주소 */
        destination: "https://openapi.naver.com/:path*",   /** 기존에 CORS가 발생한 API 주소 */
      },
    ];
  },
};

API 호출 주소 변경

const GET_LIST: () => "/api/v1/search/book.json",


async getList(req: GetListRequest, options?: AjaxOptions) {
    const { data } = await axios.get<GetListResponse>(
      options?.url ?? API_URL.GET_LIST(),
      {
        headers: {
          "X-Naver-Client-Id": process.env.NEXT_PUBLIC_NAVER_CLIENT_ID,
          "X-Naver-Client-Secret": process.env.NEXT_PUBLIC_NAVER_CLIENT_SECRET,
        },
        params: {
          ...req.query,
        },
      }
    );

    return data;
  }