Next.js: 외부 API 통신 시 cors에러 해결하기

---

Next.js 공부겸 개인 운동노트페이지를 만들고 있는 도중에,
정부공개데이터를 사용하기위해서 외부 API 통신중에 cors에러가 발생했다.
기존 React로만 통신할 때는 프론트단에서 proxy설정을 해주거나 서버를 구성했다면 서버단에서 allow origin을 추가해줘서 cors에러를 해결하곤 했다.

Next에서 처음 마주친 cors인 기념으로 2가지 해결방법을 기록해보도록 하겠다.

방법1. 프론트단에서 해결하기 - proxy 설정

React에서 proxy를 설정할 떄는 라이브러리 사용, package.json에 설정을 추가, webpack설정에 devserver에 proxy를 설정하는 등의 방법들을 사용했었다.
Next.js에서 proxy를 설정하는 방법 중 하나는 next.config.js의 Rewrites key를 사용하는 것이다.

module.exports = {
  ...
  async rewrites() {
    return [
      {
        source: '/api/:name',
        destination: `http://openapi.foodsafetykorea.go.kr/api/${process.env.NEXT_PUBLIC_FOOD_KEY}/I2790/json/1/5/DESC_KOR=:name`,
      },
    ];
  },
};

프론트단에서 직접 openApi로 요청하면 cors에러가 발생하지만,
위와 같이 설정하하고 /api/:name으로 요청을하면 destination에 해당하는 URL로 우회하여 요청하여 cors에러를 피할 수 있다.

---

방법2. 서버단에서 우회해 주기

Next.js는 따로 서버를 설정해주지않아도 서버를 제공해주지만
직접 서버를 만들면 캐시 설정 등 다양한 설정을 해줄 수 있다.
프로젝트 루트 위치에 server.js를 만들어보자.

const express = require('express');
const next = require('next');
const axios = require('axios');

const port = 5000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

   server.get('/api/:name', (req, res) => {
     const name = req.params.name;
     const URL = encodeURI(`http://openapi.foodsafetykorea.go.kr/api/${process.env.NEXT_PUBLIC_FOOD_KEY}/I2790/json/1/5/DESC_KOR=${name}`);
     axios.get(URL).then((respone) => {
       return res.send(respone.data.I2790);
     });
   });

  server.get('*', (req, res) => {
    return handle(req, res);
  });

  server.listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});

브라우저와 서버간의 통신에서는 cors가 발상하지만 서버간의 통신에서는 cors가 발생하지 않는다.
이에 착안해서 /api/:name으로 요청했을때 위의 서버가 받아서 openApi에 요청을 해주게되면 cors 에러를 피할 수 있다.🤗