문제

• vercel로 배포 후 reservation page 접근 시 CORS error 발생

원인

• next.js api에 접근을 하지 못해서 생긴 문제

  • api 주소에 hostname(localhost:3000)이 붙어 있어서 그랬던 것
  • 이와 같은 url = absolute URL(절대 경로)

  

해결

• api 주소의hostname을 삭제하고 **endpoint(/api/service)**만 남기니 문제 해결

  • 이와 같은 url = relative URL(상대 경로)
  • relative URL 을 사용하면 Axios 요청이 현재 호스팅된 도메인으로 전송되고, Vercel이 적절한 API 경로로 라우팅을 처리함

  ⇒ 배포 환경에 상관없이 요청이 Next.js 애플리케이션에서 정의된 API 경로를 가르키게 되는 것

  • axios url 모두 주소를 아래와 같이 수정