[Next.js] CORS 오류 해결방법, Next proxy 설정

 

Next를 사용하여 외부 Open API를 연동하려 하였더니 CORS 오류가 났다.

CRA 환경에선 package.json 에서 proxy 설정만 하면 해결되었던 문제였는데

Next 환경에서는 어떻게 해결해야하는 지 몰랐다.

 

그래서 찾아보고 오류를 해결해 본 방법들을 기록해보려 한다.

CORS 오류

 

오류 내용

 

Access to XMLHttpRequest at [OPEN API URL] from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

 

2022.10.08 - [개발/네트워크] - [NetWork] CORS(Cross-Origin Resource Sharing)

[NetWork] CORS(Cross-Origin Resource Sharing)

 

CORS는 이전에 포스팅에서 정리해 놓았는데 간단히 말하면, 데이터를 보내주는 API 서버와 요청하기 위한 곳의 출처가 동일해야 정확한 데이터가 응답된다. 하지만 CORS의 설정이 안되어있는 나의 로컬 PC 개발환경에서는 localhost로 URL이 전달되기 때문에 둘 사이의 url이 맞지 않아 CORS 에러가 뜨는 것이다.

 

내가 알아본 해결방법은 4가지이고, 시도해본 해결방법은 2가지이다.

1. CORS 해결 사이트 사용하기 (해봄)

2. Next.js 서버 proxy 설정 (해봄)

3. http-proxy-middleware (해보지 않음)

4. 요청을 Node express 서버로 보낸 다음 API 요청하기(해보지 않음)

 

 

1번과 2번에 대해 정리해보려 한다.

 

---

1. CORS 해결 사이트 사용하기

CORS를 임시로 해결해주는 사이트가 존재한다.

요청할 경로 앞에서 이 사이트를 붙여주면 된다. 

단, 아래 사이트로 접속을 먼저 한 다음 버튼만 눌러주면 CORS PROXY 서버가 켜지게 되고,

요청하는 URL 코드 앞에 아래 사이트 코드를 붙여준다.

 

예시

 

 try {
    //내가 요청할 API URL 앞에 https://cors-anywhere.herokuapp.com/를 붙여 줘야한다.
    const response = await axios.get(`https://cors-anywhere.herokuapp.com/http://finlife.fss.or.kr/finlifeapi/savingProductsSearch.json?auth=${process.env.NEXT_PUBLIC_CALCULATOR_BANK_API_KEY}&topFinGrpNo=020000&pageNo=1`);
      console.log(response);
      return response.data;
    } catch(err) {
        console.log(err);
      return err;
    }

 

https://cors-anywhere.herokuapp.com/

 

 

---

2. Next.js 서버 proxy 설정 

여러 레퍼런스를 둘러보던 끝에 Next.js의 Next.config.js에서 proxy를 설정할 수 있는 방법을 알게 되었다.

 

https://nextjs.org/docs/api-reference/next.config.js/rewrites

next.config.js: Rewrites | Next.js

 

Next.js rewite 설정은 요청이 들어오게 되면, 다른 경로로 매핑할 수 있게 해 준다.

 

rewite는 URL proxy 역할을 해주고, 경로를 마스킹해준다.

 

- rewite : 특정 URL을 직접입력하면 다른 URL로 이동을 하지만 사용자에게는 이동되지 않은 것처럼 보여줌.

 

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  async rewrites() {
    return [
      {
        source: '/:path*',
        destination: 'http://finlife.fss.or.kr/:path*',
      },
    ];
  },
}

module.exports = nextConfig

 

source와 destination의 속성을 설정할 수 있으며

- source : 들어오는 요청 경로 패턴이다.

- destination : 라우팅 하려는 경로이다. 

 

또한 rewite는 API_KEY를 가리기 위해서 사용하기도 한다.

그래서 source에는 /최상위 경로를 설정하고, 나가는 곳은 api의 base 경로를 설정해주었다.

 

그리고 api 요청에는 나머지 하위 정보를 입력해주었다.

 

axios api 요청 예제

try {
      const response = await axios.get(`finlifeapi/savingProductsSearch.json?auth=${process.env.NEXT_PUBLIC_CALCULATOR_BANK_API_KEY}&topFinGrpNo=020000&pageNo=1`, {});
      console.log(response);
      return response.data;
    } catch(err) {
        console.log(err);
      return err;
    }

 

이와 같이 api를 요청해주면 정상적으로 외부 OPEN API 가 불러와지는 것을 확인할 수 있다.