카카오맵 API를 사용하던 중, localhost::3000 으로는 정상 작동하지만, vercel에 배포된 도메인에서는 CORS 403에러가 발생합니다.
https://dapi.kakao.com/v2/maps/sdk.js?appkey={appkey}&libraries=services&autoload=false
도메인을 등록한 상태인데도, 해당 에러가 발생하는데 어떻게 수정 가능할지 문의 드립니다.
deploy: Vercel
platform: Next.js
[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610
배포를 했을 때 해당 오류가 난다면 서버 또는 next.js에 설정 확인이 필요해 보입니다.
다른 리소스의 요청을 막게 설정되었는지 header 설정(Access-Control-Allow-Origin, Access-Control-Allow-Credentials 등)을 확인해주세요.
죄송합니다. 설명이 부족했던것 같습니다. 현재 script key를 사용하고 있으며, 타 API(네이버 등)은 CORS 에러가 발생하고 있지 않습니다.
Vercel 및 next.js에서 해더에는 별도로 block설정을 해두지 않았는데도, (외부 API 접근 block) 해당 에러가 발생하는 상황입니다.
해당 사이트에서 확인해보니 script에 crossorigin이 적용되어 있네요.
지도 SDK는 CORS가 허용되어 있어서 별도로 crossorigin 설정을 하지 않으셔도 됩니다.
crossorigin 설정 없이 호출해도 동일한지 확인 부탁드립니다.
script선언부에 crossorigin 설정은 별도로 되어있지 않습니다.
Next.js에서 설정을 제어하는 next.config에도 별도 설정이 들어가 있지 않습니다.
→ 확인해보니, Next에서 제공하는 Script 메서드가 아닌 일반 script 테그로 작동시켰을 때, 정상 작동됩니다.
도움 주셔서 감사합니다.