[HTML/JS] origin null CORS 에러 해결하기

🧐 origin null CORS 에러가 왜 발생할까요?

HTML과 JavaScript만으로 간단한 예제를 만들다 보면 파일을 브라우저에서 바로 열어 확인하는 경우가 있습니다.

예를 들어 VS Code에서 HTML 파일을 바로 열거나, 파일을 더블 클릭해서 브라우저로 실행하는 방식입니다.

그런데 JavaScript 모듈을 사용할 때 다음과 같은 에러가 발생할 수 있습니다.

Access to script at '...' from origin 'null' has been blocked by CORS policy

이 에러는 보통 웹 서버를 통하지 않고 file:// 경로로 HTML 파일을 열었을 때 발생합니다.

브라우저는 보안상 file://에서 실행된 페이지의 origin을 null로 취급할 수 있습니다. 그리고 모듈 스크립트나 외부 리소스를 불러올 때 CORS 정책에 막힐 수 있습니다.

해결 방법은 간단합니다.

HTML 파일을 직접 여는 대신, 로컬 서버를 띄워서 http://localhost 주소로 접속하면 됩니다.

file://...
→ CORS 문제가 생길 수 있음

http://localhost:8080
→ 로컬 서버를 통해 정상 실행

Node.js 환경이 있다면 http-server 패키지를 사용할 수 있습니다.

설치 없이 바로 실행하고 싶다면 npx를 사용하면 됩니다.

npx http-server

전역으로 설치해서 사용하고 싶다면 다음 명령어로 설치할 수 있습니다.

npm install http-server -g

설치 후에는 HTML 파일이 있는 폴더에서 다음 명령어를 실행합니다.

http-server

명령어를 실행하면 터미널에 접속 가능한 주소가 표시됩니다.

예를 들어 다음과 같은 주소가 나올 수 있습니다.

http://127.0.0.1:8080
http://localhost:8080

이 주소를 브라우저에 입력하면 HTML 파일을 로컬 서버를 통해 실행할 수 있습니다.

이제 file://이 아니라 http:// 주소로 접근하기 때문에 origin null CORS 에러를 피할 수 있습니다.

VS Code를 사용한다면 Live Server 확장 프로그램을 사용하는 방법도 편합니다.

Live Server를 설치한 뒤 HTML 파일에서 Open with Live Server를 실행하면 자동으로 로컬 서버가 열립니다.

간단한 예제를 자주 확인해야 한다면 http-server보다 Live Server가 더 편할 수도 있습니다.

origin null CORS 에러는 보통 HTML 파일을 file:// 경로로 직접 열었을 때 발생합니다.

HTML/JS 예제를 만들 때 스크립트가 이상하게 로드되지 않는다면, 먼저 파일을 직접 열고 있는지 확인해보면 좋습니다.