[javascript] script type module 설정 시 CORS 보안 정책에 걸리는 문제 해결

프로젝트 진행 중에 Firestore DB 를 연결을 해야했다.

 

기존에 Firestore DB 연결을 위해서 script 뒤에 태그를 붙여서 

 

 

 

이와 같이 설정을 해주어야  Firestore DB 사용이 가능했다.

 

나은 파일분리를 통해서 

 

 

깔끔한 코드를 짜고자 했고, 그렇기 때문에 FirestoreDB.js 파일을 만들어서 

 

    <script type="module" src="js/FirestoreDB.js"></script>

 

위처럼 html 코드에 불러오는 과정을 진행했다.

 

하지만 이대로 진행을 하니까 

 

 

이와 같은 코드 오류가 발생했다.

 

알아보니,

 

로컬에서 html을 cli 환경에서 open 명령어로 실행 시켰을시 위와 같이 CORS Policy 관련 에러가 발생할 수 있다고 한다.

 

type 을 module 로 설정한 script 태그에서는 html 파일을 로컬에서 로드했을 때 javascript 모듈 보안 요구사항으로 인해 CORS 오류를 발생한 것이다.

 

이 부분은 파일을 분리하고 module type 으로 불러오는 과정을 갖는다면 피하지 못해보였다.

 

그래서 해결책으로는

 

1. 해당 파일은 html 코드 내부에 script 태그를 만들어 포함해서 진행한다.

 

2.  index.html 우클릭 후 나오는 Open with live Server 을 통해서 실행을 한다.

 

이렇게 두 가지이다.