[JS] 로컬에서 CORS 오류 해결

웹 공부 중에 HTML에 JS가 로딩이 안 되는 것을 발견했다. 

Access to Script at 'file://....' from origin 'null' has been blocked by CORS policy: ...

 

GPT에게 물어보니....

이 오류 메시지는 브라우저에서 발생하는 Cross-Origin Resource Sharing (CORS) 정책과 관련된 문제입니다. 이 오류는 웹 브라우저에서 웹 페이지의 스크립트 파일을 로컬 파일 시스템(file:// 프로토콜)에서 불러올 때 발생합니다. 브라우저의 보안 정책에 따라 웹 페이지에서는 특정 프로토콜 (http, https 등)로 서비스되는 리소스만 불러올 수 있도록 제한되어 있습니다.

해당 오류 메시지에서 나타난 'null'은 웹 페이지가 로컬 파일 시스템에서 로드되었음을 나타냅니다. 이는 보통 로컬에서 HTML 파일을 직접 더블 클릭하여 브라우저에서 열었을 때 발생하는 상황입니다.

 

쉽게 말하자면

-> 브라우저가 보호하기 위한 규칙이 있다.

-> 로컬 파일 시스템에서 스크립트를 직접 가져오려고 하면 문제가 생긴다.

 

---

해결

Node.js의 http-server를 사용하여 로컬 개발 서버를 구축한다. 

 

npm install http-server -g

설치 뒤 실행한다. 

npx http-server

 

그 후

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

둘 중 하나를 url에 붙이면 된다.