[ERROR] 로컬환경에서의 CORS policy

 

canvas로 이것저것 만들어보려고 로컬 환경에서 실행시켰는데 계속 안되길래,,,,, CORS 에러 라고 한다

 

CORS는 cross-origin resource sharing으로, 동일한 출처에서만 리소스를 공유함을 의미한다고 한다.

동일한 출처( origin )여야 공유할 수 있다는건데, 

오류를 보면 origin이 null 값이라구..!

 

정말 app.js의 origin이 null로 되어있다.!!...!

 

그 이유는 script의 type 속성을 module로 설정해 둬서 그런 것인데,

 

type을 module로 설정한 script 태그에서는 html 파일을 로컬에서 로드했을 때 자바스크립트 모듈 보안 요구사항으로 인해 CORS오류를 발생시킨다고 한다..!!

---

 

해결방법은 이 파일을 서버를 통해 실행시키면 CORS 에러를 해결 할 수 있다.

 

npm install http-server -g

 

http-server를 전역으로 설치해주고

npx http-server

실행시켜주면 된닷.

localhost:8080으로 실행하면 아주 잘 동작한다

 

다른 포트로 실행하고 싶다면, npx http-server -p 포트번호 로 해주면 된다고 한다!

 

 

 

 

 

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

 

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