CORS 에러 해결 방법

ES6+를 사용해서 javascript 과제를 하던 중 아래와 같은 에러가 콘솔 창에 떴습니다.

​

흠.. 열심히 구글링해서 원인을 찾아보니

서버에 올리지 않은 로컬의 HTML 파일을 크롬을 통해 Ajax 테스트를 하는 경우 발생한다고 합니다.

​

​

해결 방법을 찾아보니 크롬 창 속성에 --disable-web-security --user-data-dir을 추가하면 된다는데,

웹 보안을 해제하는 옵션을 추가하는 거라.. 조금 찝찝하더라고요.

​

그래서 옵션을 추가하는 방법이 아닌,

크롬 확장 앱을 사용해서 에러를 해결하는 방법을 소개해드릴까 합니다!

---

오늘 소개해드릴 확장 앱은 'Web Server'입니다.

​

​

1. 설치 경로​

아래 경로로 들어가서 확장 앱을 다운로드합니다.

 

Web Server for Chrome

A Web Server for Chrome, serves web pages from a local folder over the network, using HTTP. Runs offline.

chrome.google.com

​

2. 앱을 실행합니다.

앱을 실행하면 아래와 같은 페이지가 보입니다.

​

자! 이제 'Web Server' 앱을 사용할 준비가 끝났습니다.

이제 각각의 영역들에 대해 살펴보겠습니다.

---

1. 폴더를 선택할 수 있는 영역

* [CHOOSE FOLDER]를 클릭하시면 확인하고 싶은 페이지가 있는 폴더를 설정할 수 있습니다.

* http://127.0.0.1:8887 링크를 클릭하면 확인하고 싶은 페이지가 열립니다.

​

​

2. 세부 설정 영역

* 'Run in background' 선택 유무를 통해 백그라운드 실행 여부를 선택할 수 있습니다.

* ​'Accessible on local network' 선택 유무를 통해 로컬 네트워크 환경에서 접속 여부를 선택할 수 있습니다.

* ​'Prevent computer from sleeping'​ 선택 유무를 통해 컴퓨터가 잠자기 모드 해제를 선택할 수 있습니다.

* ​'Automatically show index.html'​은 설정한 폴더의 index.html 파일을 자동으로 보여주는 기능입니다.

선택을 해제하면 index.html 파일이 아닌 폴더에 있는 html 파일을 보여줍니다.

* 'Enter Port' 영역을 통해 포트 번호를 변경할 수 있습니다.

​

---

이상!

혹시라도 서버에 올리지 않은 로컬의 HTML 파일을 크롬을 통해 Ajax 테스트를 하는 경우

에러가 생기는 분들에게 도움이 되길 바라며..