특정 주소에서 스크립트를 불러오면 cors에러가 납니다

지도/로컬 API
,
1

안녕하세요,

요청 주소: dapi.kakao.com/v2/maps/sdk.js?app_key=자바스크립트키
플랫폼의 사이트 도메인에 http://example.kr:14011 추가된 것을 확인했습니다.

A. http://example.kr:14011/review/review_meta/10098/edit/
react를 사용해 빌드했으며 js에서 script를 나중에 불러옵니다.

const script = document.createElement(“script”);
script.crossOrigin = ‘anonymous’;
script.src = //dapi.kakao.com/v2/maps/sdk.js?appkey=${Config.KAKAO_JS_APP_KEY}&libraries=services,clusterer&autoload=false;
script.async = true;
document.head.appendChild(script)

정상동작합니다.

B. http://example.kr:14011/admin/review/reviewmeta/10509/change/
django template 에서 html script로 sdk를 불러옵니다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트키&libraries=services"></script>

최근 CORS 문제가 생긴 것을 발견했습니다.
map api REST_API_KEY로 요청이 가능했던 때 까진 정상 동작 했던걸로 기억합니다.

Request URL: http://dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트키&libraries=services&autoload=false
Referrer Policy: strict-origin-when-cross-origin

-시도해본 방법

  1. 값 확인 -> REST_API키로 잘못 지정되어있어 수정 -> 실패
  2. 캐시삭제 -> 실패
  3. 시크릿탭에서 열어보기 -> 실패

어떻게 해결할 수 있을지 도움 부탁드립니다.ㅠㅠ
감사합니다.

2

기본적으로 자바스크립트 SDK이므로
JavaScript 키를 사용하셔야 하고요.

사이트 도메인을 등록하셔야 합니다.
https://apis.map.kakao.com/web/guide/

3

답변 주셔서 감사합니다.

실제 사이트와 자바스크립트키를 노출할 수 없어
임의로 기재해 혼란이 있으셨던 것 같아요.ㅠㅠ

사이트 도메인과 자바스키립트 키는 정상적으로 등록되어 있습니다!

4

사이트 도메인에는
프로토콜(http:, https:) + 도메인네임(with 포트번호) 이 모두 입력되어야 합니다.
상황에 맞춰 file: 프로토콜도 사용할 수 있습니다.

1개의 좋아요
5

다른 원인이었지만 해결되었습니다,
수고해주셔서 감사합니다 :heart_eyes:

REST_API_KEY —> JAVASCRIPT_KEY 로 변경 전,
테스트로 아래와같이 crossorigin을 추가했다 삭제하지 않아 발생한 문제였습니다.

<script crossorigin type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트키&libraries=services"></script>

아래처럼 변경 후 정상 동작합니다.
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트키&libraries=services"></script>

1개의 좋아요