html파일을 tomcat 등에서 실행하지 않고 local(하드디스크 등)에서 직접 실행할 때, 다음과 같은 에러가 발생하는 경우가 있습니다.
Access to script at 'file:///C:/경로' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.
이 에러가 발생한 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CORS</title>
</head>
<body>
<script type="module" src="js/module.js"></script>
</body>
</html>
1. 해결방법을 먼저 말하면, 간단합니다.
서버에 올리면 됩니다.
그렇다면 왜 하드디스크에서 실행하면 CORS가 발생하는 것일까요?
2. 먼저 CORS는 다음과 같습니다.
교차 출처 리소스 공유(Cross-Origin Resource Sharing)의 약자입니다. 이것은 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있도록 권한을 부여하도록 브라우저에 알려주는 체제입니다.
보안상의 이유로 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. 즉, 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있는데 이를 동일 출처 정책(Same Origin Policy, SOP)라고 합니다.
만약 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 합니다.
이 때 출처를 구분하는 기준은 URI의 protocol, host, port 입니다.
3. 그런데... script에서 시작하지 않았는데?
<script type="module">의 특성
MDN의 javascript modules에 관한 설명에 따르면 type을 module로 설정한 <script> 태그가 포함된 HTML 파일을 로컬에서 불러올 경우 javascript 모듈 보안 요구사항으로 인해 CORS 오류가 발생한다고 합니다.
4. 이제 원래 에러 메시지를 확인합니다.
에러 메시지에서 말하는 내용은 다음과 같습니다.
c:/경로/의 html에서 null/ 로 요청했기 때문에 CORS 정책에 따라 제한된 것입니다. 즉, null/like_button.js 를 요청한 것 입니다.
이러한 에러가 발생하는 이유는 브라우저가 웹에서 로컬 파일에 접근하지 못하도록 하기 위해 이런 방법을 사용한다고 합니다.
[참조]
https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules
'웹 개발' 카테고리의 다른 글
| thymeleaf vs jsp (0) | 2022.03.13 |
|---|---|
| spring boot의 application.properties에서 @Scheduled의 cron값을 설정하는 방법 (0) | 2022.03.13 |
| Spring Controller에서 @PathVariable에 특수문자 허용하는 방법 (0) | 2022.02.13 |
| [spring] Json return 시, null 항목 제거하는 방법 (0) | 2022.02.13 |
| [java Spring] RestTemplate SSL ignore (0) | 2022.01.26 |
