TIL-68, Next.js API 요청

Next.js 클라이언트에서

API 서버로 data를 요청하게 되면, CORS 에러를 뱉어낸다.

CRA에서는 package.json에 proxy를 추가하여 해결할 수 있었지만,

(https://www.notion.so/React-CORS-52c1f2fe9d4c4d54a959db977a1e016d)

Next.js에서는 잘 안됐다.

해결하는 방법으로 next.config.js 파일에 rewrites() 를 추가해주는 것이었다.

module.exports = {
  reactStrictMode: true,
  // 하단부터 입력
  async rewirtes() {
    return [
      {
        source: "/api/movies",
        destination: `http://요청할API주소`,
      },
    ];
  },
};

위와 같이 rewrites()를 추가해준다.

source의 주소로 접속시, destination으로 redirect 해주는 것이다.

next.config.js 파일을 수정하고 난 뒤에는 항상 서버를 재시작 해줘야 한다.

재시작 후에, 클라이언트에서 요청을 보낼때 url에 source를 넣어준다.

axios.get("api/movies").then((res) => {
  console.log(res);
});

위와 같이 입력해주면, 설정한 destination (API 요청 주소)로

redirect되고, CORS 오류는 발생하지 않고 data를 받아오게 된다.