[JS] from origin 'null' has been blocked by CORS policy: 에러..

오늘 Vue를 만지작 거리고 있는데, 다음과 같은 에러가 났다.

 

에러 내용

내 PC에 있는 내가 만든 저 testInstance.js를 쓰려는데, CORS에러가 뜨는 것.. 즉 SOP가 보안 때문에 막았으니

허용을 해줘라 인데, 내 로컬에서 내가 만든 파일을 내가 쓰겠다는데 뭐가 보안에 걸려서 허용하라는 건지

이해가 되지 않았다. 도메인이라도 다르면 그럴 수 있다 생각하고 프록시라도 걸어줄텐데...

 

 

그래서 여기저기 찾아보니, 

<script type="module" src="/js/testInstance.js"></script>

 

저기 type="module" 이놈이 문제였다

 

type을 module로 설정한<script> 태그가 포함된 HTML 파일을 로컬에서 로드할 경우 자바스크립트 모듈 보안 요구사항으로 인해 CORS 오류가 발생한다는 것이다.

 

즉, type이 module인 태그를 포함하는 HTML파일을 로컬에서 실행하면 보안에 걸린다! 라는 것

 

해결방법은 서버 돌리면 된다. VScode같은 경우는 그냥 서버 하나 만들어서 돌리고,

나같이 이클립스 쓰는 사람은 jsp로 만들어서 서버 갔다오면 된다. 나는 후자와 같은 방식으로 해결했다. 

 

 

=======================2022.05.12 추가내용=====================

 

 

근데 만약 서버에 안올리고 그냥 HTML파일을 웹브라우저로 열고싶다고 하면 다음과 같은 방법으로 해결할 수 있다.

( 크롬 기준으로 설명함 )

 

1. 크롬 바로가기를 만들어준다.

 

2. 크롬 바로가기 우클릭 -> 속성 -> 대상을 아래같이 수정해준다.

 

--기본
"C:\Program Files\Google\Chrome\Application\chrome.exe"

--수정
"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-web-security --user-data-dir=%LOCALAPPDATA%\Google\chromeTemp -–allow-file-access-from-files

 

뒤에 

--disable-web-security --disable-web-security --user-data-dir=%LOCALAPPDATA%\Google\chromeTemp -–allow-file-access-from-files를 붙인다.

 

--disable-web-security : CORS 사용 체크 안 함.

-–allow-file-access-from-files : AJAX / JSON 같은 것을 사용 할 때 로컬 파일에 대한 엑세스 허용.

 

이렇게 하고 해당 "크롬 바로가기"로 접속하면 아래와 같은 경고창이 뜨는 데 무시하고 쓰면 된다.

 

 

이렇게 하면 서버를 키지 않고, <script>에 type="module"을 넣고 사용할 수 있다.