JavaScript module 로컬 실행 에러

CORS 정책 위반

Access to script at ‘PATH’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

Failed to load resource: net::ERR_FAILED

🆘 발단

ES6의 module export/import를 사용해보고자 로컬에서 아래와 같은 코드를 작성하고 실행시켰더니 위와 같은 에러코드를 만났습니다.

index.html :

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

main.js :

import { paintClock,hideClock } from "./clock.js"; 
import { paintGreeting } from "./greeting.js";          

🎯 해결방안

로컬에서 웹서버를 실행시킵니다.

Vscode를 쓰신다면 Live Server를 사용할 수 있습니다.

index.html에서 오른쪽 클릭 -> Open with Liver Server

🤔 원인

우선 문제해결과 원인 분석에 참고했던 블로그 글입니다. 참고한 원글

결론부터 이야기 하면 브라우저의 보안 강화로 인해 path가 다른 module의 호출을 막았기 때문입니다. 로컬 경로(file:/…)module을 요청하는 Request URL이 null로 넘어왔기 때문에 CORS 정책을 위반했습니다.

CORS 정책이란

때문에 웹서버를 실행시켜 경로를 일치시켜주면 실행이 됐던 것입니다.

🔖 Reference

로컬에서 CORS policy 관련 에러가 발생하는 이유