<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CORS</title>
</head>
<body>
<script type="module" src="js/module.js"></script>
</body>
</html>Access to script at 'file:///C:/경로/js/module.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.바닐라 JS로 다음과 같이 스크립트를 모듈 타입으로 불러올 때, 문제가 발생하였다.
왜 이런 문제가 발생할까?
우리가 작업하는 로컬 환경에서 SOP를 위배했기 때문에 나타나는 현상이다. SOP는 `동일 출처 정책` 이라는 뜻이다. 어떤 출처(origin)에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 브라우저의 보안 방식을 뜻한다. 이때 다른 출처와 같은 출처를 구분하는 기준은 URI의 `프로토콜, 호스트, 포트`가 같은가를 통해 구분한다.
| schema(protocol) | host | port | resource |
| http:// | www.example.com | (:80) | /../file.html |
위에서 제시한 `프로토콜, 호스트, 포트` 까지 같다면 같은 출처로 구분되며, 다르다면 다른 출처로 구분이 된다.
아래 태그에는 SOP(동일 출처 정책)이 적용이 되지 않는다!
- <img> 태그로 다른 도메인의 이미지 파일을 가져올 때
- <link> 태그로 다른 도메인의 CSS를 가져올 때
- <script> 태그로 다른 도메인의 javascript를 가져올 때
- 그 외에 <video>, <audio>, <object>, <embed>, <applet> 태그를 사용하여 가져올 때
적용이 되지 않는 태그 중 유일하게 <script> 태그에서 `XMLHttpRequest, Fetch API`를 사용할 때 SOP가 적용되지 않는다. SOP이 적용되는 방식으로 다른 출처의 자원에 접근하는 과정으로 인해 문제 상황이 발생을 하였고, CORS 에러는 Cross-Origin HTTP 요청을 실행하여 액세스 권한을 부여하도록 하는 매커니즘을 가르킨다.
그렇다면 로컬 환경에서 통신을 수행하지 않았는데 오류가 왜 뜬걸까?
이에 따른 내용은 구글링을 통해 찾은 블로그와 공식문서를 통해 알아보았던 내용을 통해 찾을 수 있었다.
- 먼저 MDN의 javascript modules에 관한 설명에 따르면 문제가 된 부분같이 type을 module로 설정한<script> 태그가 포함된 HTML 파일을 로컬에서 로드할 경우 자바스크립트 모듈 보안 요구사항으로 인해 CORS 오류가 발생한다고 한다. 이 때문에 ajax로 요청한 것임 아님에도 불구하고 CORS 오류가 발생한다.
- 로컬시스템에서 로컬 파일 리소스를 요청할 때는 origin(출처)이 null로 넘어가기 때문에 CORS에러가 발생한다.
➡ 위의 에러 코드에서 null에 대한 관련 내용을 찾을 수 있으며, 콘솔창에서 자세한 오류코드를 파악할 수 있다.
로컬의 리소스를 요청할 때 origin(출처)은 null 값이다.
콘솔창을 들여다보면 에러가 나기 전 우리는 같은 경로의 자원을 요청하며 정상적인 경로를 연결했다고 생각을 하지만, 실상은 브라우저 별로 상이하지만 보통 웹에서 로컬 파일에 접근하지 못하도록 하기 위해 CORS 정책을 통해 제한을 시키는 방법을 사용한다고 한다. 즉, 우리가 리소스를 요청한 건 동일 경로의 리소스를 요청한 것이 아닌, null 경로의 리소스를 요청한 것이 되어 CORS 에러가 발생한 것이다.
그렇다면 이 문제점을 어떻게 해결할 수 있을까?
가장 빠른 해답은 서버에서 올려 `프로토콜, 호스트, 포트`를 같게 만들어 CORS 에러를 해결을 한다.
npm install http-server -g터미널 창에 위와 같은 명령어를 통해 전역으로 http-server을 설치를 해준다.
npx http-server그리고 http-server 명령어를 통해 서버를 실행시켜준다.
http://127.0.0.1:8080터미널 창에 어떤 포트로 들어가라는 내용이 나오지만, 보통은 위와 같은 로컬 아이피로 접속을 할 수 있다.
npx http-server -p 원하는 포트번호8080이 아닌 다른 포트를 실행시키고 싶다면, 위와 같은 명령어를 통해 원하는 포트로 재설정을 할 수 있다.
GitHub - klmhyeonwoo/vanilla-javascript-with-component: 바닐라 자바스크립트 컴포넌트화(CSR) 연습
바닐라 자바스크립트 컴포넌트화(CSR) 연습. Contribute to klmhyeonwoo/vanilla-javascript-with-component development by creating an account on GitHub.
github.com
로컬에서 CORS policy 관련 에러가 발생하는 이유
🚀 발단 위와 같은 html 파일을 로컬환경에서 크롬 브라우져로 실행시켰더니 >Access to script at 'file:///C:/경로/js/module.js' from origin 'null' has been blocked by CORS policy: Cr
velog.io
'개발적인 > 웹 개발' 카테고리의 다른 글
| 공식문서는 왜 보는걸까? (0) | 2022.12.03 |
|---|---|
| React에서의 DOM TREE (0) | 2022.12.03 |
| JSX와 Babel (0) | 2022.12.03 |
| Input 타입이 file인 디자인은 어떻게 커스텀할까? (0) | 2022.11.12 |
| [웹 개발] 이미지 에러 시, 대체 이미지로 에러 대체하기 (0) | 2022.02.22 |
댓글