Use Next.js to rewrites method to solve CORS ERROR
넥스트에서 rewrites 를 사용해 CORS 에러를 해결해 보자
Keyword
#next.js #rewrites #proxy #cors
기 (생각)
열심히 프로젝트를 진행하고 있는 인피덕
next 로 구성한 프로젝트에서 첫 api call 을 날려 보는데…
CORS?!?! holy moly 이걸 여기서 또 보네……………
로컬 환경에서 api call 을 때리기 위해 proxy 를 통해 CORS 를 회피해 보고자 한다.
찾아보니 rewrites 라는 친구로 CORS 를 해결할 수 있다고 한다.
승 (진행)
next.config.js 파일에 rewrites를 추가해 준다.
// next.config.js
...
const rewrites = async () => {
return [
{
source: "/:path*",
destination: "http://api.url/:path*"
},
];
};
...
module.exports = { rewrites };
전 (해결)
api 호출을 해보니 에러 없이 잘 호출되는 것을 볼 수 있음
결 (알아낸 점)
rewrites는 프록시 목적이 아니라 endpoint 를 masking 느낌이 더 강한 듯 보인다.
예를 들어, 내가 /a 라는 endpoint 로 api call 을 날리는데, 요청 보낼 때는 /b 로 보내는 것 처럼 하고 싶을 때 사용하면 되는 느낌
...
const rewrites = async () => {
return [
{
source: "/b",
destination: "/a"
},
];
};
...