[TIL] 2023.07.04 Vercel 배포 후 CORS 에러 해결하기

Access to XMLHttpRequest at 'http://localhost:3000/api/service' from origin 'https://test.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

dev 환경에서는 아무 문제 없었는데 Vercel로 배포한 후에 데이터를 조회화면서 CORS 에러가 발생했다. 

 

const getResvData = () => {
  return axios
    .get('http://localhost:3000/api/reservation')
    .then((res) => {
      return res.data.data;
    })
    .catch((error) => {
      console.error('데이터 조회 도중 오류 발생!', error);
    });
};

데이터를 조회하는 데 에러가 발생한 거 같아 일단 '데이터 조회 도중 오류 발생!'이라는 에러 메시지가 위치해 있는 코드를 살펴봤다. 코드를 보니 바로 원인이 보인다! `axios.get`할 때 URL의 hostname을 localhost로 작성했는데 배포했을 때는 localhost가 아닌 배포 시 도메인으로 데이터에 접근하기 때문에 CORS 에러가 발생한 거 같다.

 

export const getResvData = () => {
  return axios
    .get('/api/reservation')
    .then((res) => {
      return res.data.data;
    })
    .catch((error) => {
      console.error('데이터 조회 도중 오류 발생!', error);
    });
};

비동기 통신 관련해서 개발 단계, 배포 단계 모두 유연하게 적용하기 위해서는 URL을 상대 경로로 작성하면 된다.

 

상대 경로란 hostname을 삭제하고 endpoint(/api/service)만 남기는 것을 의미한다. 상대 경로를 사용하면 Axios 요청이 현재 호스팅 된 도메인으로 전송되고, Vercel이 적절한 API 경로로 라우팅을 처리한다.

 

---

참고 문서

TIL_ Next.js API_vercel 배포 후 CORS error