TIL_ Next.js API_vercel 배포 후 CORS error

📒 오늘의 공부

1. Next.js API_CORS error

문제

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

원인

• Next.js API URL을 절대경로로 설정해서 생긴 문제
  

• 절대경로URL(absolute URL)

  • hostname(http~)이 붙어 있는 URL
  • http://localhost:3000/api/service

• 상대경로URL(relative URL)

  • hostname 없이 endpoint만 있는 URL
  • /api/service
  • relative URL 을 사용하면 Axios 요청이 현재 호스팅된 도메인으로 전송되고, Vercel이 적절한 API 경로로 라우팅을 처리한다.
    ⇒ 배포 환경에 상관없이 요청이 Next.js 애플리케이션에서 정의된 API 경로를 가르키게 되는 것

해결

• endpoint만 남긴 상대경로URL로 변경 후 error 해결