Next.js API Routes로 CORS에러 해결하기

Sony·2024년 7월 16일

🎲 프론트엔드

목록 보기

3/3

Intro

Certi 프로젝트 개발 과정에서 추천 채용공고 화면을 만들기 위해 원티드의 open API를 사용해야 할 일이 생겼다. 우선 테스트를 위해 API Docs를 참고하여 원티드 측 개발 서버로 요청을 보냈더니 CORS 에러가 발생했다.

CORS Error?

CORS(Cross-Origin Resource Sharing) 에러는 서버의 자원에 접근하려고 할 때, 요청하는 도메인이 허용되지 않은 경우 발생한다. GPT에게 Next js 환경에서 해당 에러에 대한 해결책을 문의해본 결과, 크게 3가지 정도의 방법이 존재했다.

프록시 서버 사용: 프론트엔드와 백엔드 사이에 프록시 서버를 두어 클라이언트가 프록시 서버에 요청을 보내고, 프록시 서버가 다시 백엔드에 요청을 보내는 방식이다.
서버에서 CORS 허용: 이 방법은 클라이언트 차원에서 해결할 수 없지만, 서버 관리자에게 요청하여 Access-Control-Allow-Origin 헤더를 설정하는 방법이다.
Next.js API Routes 사용: Next.js에서 제공하는 API Routes를 사용하여 프록시 서버처럼 작동하게 할 수 있다.

만약 우리 서비스측 서버를 사용하는 상황이라면 2번 방식처럼 서버(백엔드) 개발자에게 요청하여 서버 차원에서 해결할 수 있는, 클라이언트 입장에선 그리 까다로운 에러는 아닐(?) 수도 있다.

하지만 이번 상황의 경우 우리측 서버가 아닌 원티드의 Open API를 사용하는 상황이기에 클라이언트 차원에서 우회를 통한 해결이 필요했다.

그리고 나는 3번 방식을 통해 이 문제를 해결하기로 결정했다.

Solutions

그럼 이제부터 Next.js API Routes를 사용하여 CORS 에러를 해결한 과정에 대해 서술해 보겠다.

1. API Route 작성 (pages/api/proxy.js)

우선 pages/api 경로에 proxy.js 라는 이름의 API Route 파일을 생성해주고, 아래와 같이 설정해주었다.

import axios from 'axios';

export default async function handler(req, res) {
  try {
    const response = await axios({
      url: '요청을 보낼 API 주소',
      method: req.method,
      headers: {
        'Content-Type': 'application/json',
      },
    });

    res.status(response.status).json(response.data);
  } catch (error) {
    res.status(error.response ? error.response.status : 500).json({
      message: error.message,
    });
  }
}

2. 클라이언트 코드에서 API Route 호출

다음은 클라이언트에서 작성한 API Route를 호출할 차례이다. 나는 아래와 같은 방식으로 호출해보았다.

const getJobPostings = async () => {
    try {
      const response = await axios.get('/api/proxy');
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };