[http-server] HTML 테스트를 위한 웹 서버 띄우기 (빠르게)

들어가기 전

---

얼마 전, 흥미로운 글을 확인해서 로컬에서 따라해보던 중, cors오류를 만났다. cors오류는 다른 도메인에서 소스를 불러올 때 동일한 출처가 아니면 불러오지 못하게하는 오류인데 로컬에서 로컬의 모듈을 불러오는데 오류가 뜨고 있었다. 

 

브라우저가 html에서 모듈을 불러오는거라 문제가 없어보였는데 확인해보니 <script type="module" src="index.mjs" /> 이런식으로 모듈을 불러온다면 cors오류가 난다고 한다. 

cors 오류가 나는 이유는 동일 출처 도메인 정책으로 동일한 도메인에서 나온 리소스만 허용한다는 정책이다. 

즉, 이걸 해결하기 위해선 웹서버를 구축해서 같은 도메인을 사용해야 한다는 것이다. 

node, vue, react 등 프레임워크를 사용하여 구현할 수 있지만 생각보다 오래걸리기에 더 빠른 방법을 찾아보다. Microsoft에서 올라온 글을 보게 되었고, npm이 설치된 환경에서 매우 간단하게 웹서버를 띄우고 확인 할 수 있다.

 

http-server 설치 및 실행

---

일단 http-server를 사용하려면 node가 필요하다. 

npm install -g http-server

앞으로 빠른 테스트를 위해 글로벌로 설치해서 사용할 예정이다. 글로벌로 설치한다면 앞으로 테스트를 위한 프로젝트에 들어가 http-server를 실행하면 index.html을 찾아서 실행해준다. 

 

해당 프로젝트로 들어가 아래의 명령어를 입력해주면 index.html를 찾아 실행이 되며 cors 오류가 나지 않는다. 

http-server

---

테스트용 HTTP 서버 실행 - PlayFab