apua34
10월 22, 2023, 5:00오전
#1
카카오맵 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 문의 전 꼭 읽어 주세요.
기본 사항
로컬 (REST) API 에 대한 설명은 로컬 API 가이드 를 참고하세요.
지도 SDK에 대한 설명은 Kakao Map API 가이드 를 참고하세요.
지도/로컬 API 사용 시 활용할 수 있는 카카오맵 아이콘 이미지는
Kakao Map 리소스 페이지에서 다운받울 수 있습니다.
로컬 API의 주소검색 기능과 당사가 별도로 제공하는 우편번호 서비스는 서로 다른 서비스 입니다.
우편번호 서비스 사용과 관련해서는 이곳에서 대응해드리기 어려우며
우편번호 서비스 가이드 내 “문의하기” 를 이용해주세요.
문의글 작성은
꼭 현재 사용 중인 앱키를 등록한 계정으로 해주셔야 정확한 안내가 가능합니다.
또한 서비스 소유자/회사와 계정 소유자가 동일하거나 소속관계가 확인되어야 정확한 안내/대응이 가능합니다.
문의하시기 전에 이곳 DevTalk의 게시글 검색을 통해
유사 문의에 대한 답변을 먼저 찾아보시면 더 빠르게 문제 해결이 가능할 수 있습니…
lea.ju
10월 23, 2023, 12:55오전
#2
배포를 했을 때 해당 오류가 난다면 서버 또는 next.js에 설정 확인이 필요해 보입니다.
다른 리소스의 요청을 막게 설정되었는지 header 설정(Access-Control-Allow-Origin, Access-Control-Allow-Credentials 등)을 확인해주세요.
apua34
10월 23, 2023, 1:38오전
#3
죄송합니다. 설명이 부족했던것 같습니다. 현재 script key를 사용하고 있으며, 타 API(네이버 등)은 CORS 에러가 발생하고 있지 않습니다.
Vercel 및 next.js에서 해더에는 별도로 block설정을 해두지 않았는데도, (외부 API 접근 block) 해당 에러가 발생하는 상황입니다.
lea.ju
10월 23, 2023, 6:48오전
#4
해당 사이트에서 확인해보니 script에 crossorigin이 적용되어 있네요.
지도 SDK는 CORS가 허용되어 있어서 별도로 crossorigin 설정을 하지 않으셔도 됩니다.
crossorigin 설정 없이 호출해도 동일한지 확인 부탁드립니다.
apua34
10월 23, 2023, 11:19오전
#5
script선언부에 crossorigin 설정은 별도로 되어있지 않습니다.
Next.js에서 설정을 제어하는 next.config에도 별도 설정이 들어가 있지 않습니다.
→ 확인해보니, Next에서 제공하는 Script 메서드가 아닌 일반 script 테그로 작동시켰을 때, 정상 작동됩니다.
도움 주셔서 감사합니다.
1개의 좋아요