카카오맵 dev 환경 cors 에러

카카오맵 API (지도/로컬)
,
1

프로젝트는 dev와 prod 배포 환경이 있는데요,

prod랑 local에서 잘 작동하는 카카오맵 api가 dev 환경에서만 cors 에러가 납니다.

  1. 콘솔에서 해당되는 URL (local, dev, prod) 들이 등록되어있을걸 확인했습니다.
  2. Next.js를 사용하는 프로젝트입니다
  3. next/script에서 그냥 html script로 바꾸면 해결이 될까요? (카카오 맵 API를 사용하던 중 문의 드립니다 - lea.ju 님의 게시물 #2)

뭐가 잘 못 되었는지 알 수 없습니다 …

DEV:

스크린샷 2024-03-21 오후 4.44.52
스크린샷 2024-03-21 오후 4.44.52594×1044 43.3 KB

PROD:

스크린샷 2024-03-21 오후 4.43.03
스크린샷 2024-03-21 오후 4.43.03594×1044 57.6 KB 

 <Script
            src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_KEY}&libraries=services,clusterer&autoload=false`}
            strategy="beforeInteractive"
            defer
          />

Access to script at 'http://dapi.kakao.com/v2/maps/sdk.js?appkey=dd49e4f1a975d21d7676266544d0e446&libraries=services,clusterer&autoload=false' from origin 'http://dev-mgr.wev-charger.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET http://dapi.kakao.com/v2/maps/sdk.js?appkey=dd49e4f1a975d21d7676266544d0e446&libraries=services,clusterer&autoload=false net::ERR_FAILED 200 (OK)

2

dev 환경에서만 동작이 다르게 된다면 지도 API 문제가 아니라 환경으로 인한 문제로 보입니다.
config설정이 다른 부분이 있는지 확인해보셔야 할 것 같습니다.

만약 첨부한 이전 게시글과 동일한 현상이라면 개발자 도구에서 script를 확인해 보면 crossorigin 속성이 적용되어 있을 거예요.
해당 속성이 적용되어 있다면 crossorigin 속성이 적용되지 않게 하거나 기본 HTML script로 변경해서 확인해 주세요.

1개의 좋아요
3

crossorigin 속성 문제가 맞았습니다. next/script에서 기본 html script로 변경 후 local, dev, prod에서 정상적으로 작동하는걸 확인했습니다. 감사합니다.

1개의 좋아요