반응형
❗ Error issue
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>NexPlayer</title>
<style type="text/css">
#player_container {
width: 90%;
margin: auto;
padding-top: 50.625%; /* 16:9 Aspect Ratio 56.25 * 0.9 */
position: relative;
}
@media (min-width: 75rem) {
#player_container {
width: 50%;
padding-top: 28.125%; /* 16:9 Aspect Ratio 56.25 * 0.5 */
}
}
h1 {
text-align: center;
}
#player {
background-color: black;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
}
#warning {
background-color: red;
text-align: center;
display: none;
}
</style>
</head>
<body>
<h1>NexPlayer HTML5</h1>
<div id="warning">
<h1>Unsupported protocol</h1>
<h3>Loading HTML using the file protocol can't be supported. Please use a <a href="https://nexplayer.github.io/getting_started.html#explanation">server</a> (HTTP/HTTPS protocol).</h3>
</div>
<div id="player_container">
<div id="player"></div>
</div>
<script src="Latest SDK version. Check 'Releases' section"></script>
<script type="text/javascript">
nexplayer.Setup({
key: "ENTER YOUR LICENSE KEY HERE",
div: document.getElementById('player'),
src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
});
</script>
</body>
</html>위와 같은 HTML5 파일을 Local에서 크롬 브라우져 또는 엣지 실행했더니, 아래와 같은 에러가 발생
💡 해결방안
- VS Code를 사용해서, 로컬이 아닌 서버에 .html을 올려서 실행한다.
VS Code Terminal 실행( 단축키 : Ctrl + ` )
npm install http-server -ghttp-server 실행
npx http-server해당 폴더를 서버에 올리기
http://127.0.0.1:8080- 위 주소로 접속하면, CORS Error가 사라진 것을 확인할 수 있다.
- 추가로, 폴더 안에 .html 파일이 있다면, 링크를 통해 확인해볼 수 있다.
❓️ CORS가 발생하는 이유
- 핵심은 SOP - "Same Origin Policy : 동일 출처 정책" 때문이었습니다.
- 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 브라우저의 보안 방식
- 같은 출처와 다른 출처를 구분하는 기준은 URI의 프로토콜, 호스트, 포트의 같음 여부
- 위에서 포트 부분까지 같다면, 같은 출처, 다르면 다른 출처로 간주
- 하지만, 이러한 정책이 모든 방식의 요청에 적용되는 것은 아니다.
- 예를 들면,
- <img> 태그로 다른 도메인의 이미지 파일을 가져오거나
- <link> 태그로 다른 도메인의 CSS를 가져오거나
- <script> 태그로 다른 도메인의 javascript를 가져오는 것
- 그 외에도 <video>, <audio>, <object>, <embed>, <applet> 태그도 해당
- Script에서 XMLHttpRequest나 Fetch API를 사용해, 다른 출처에 리소스를 요청할 때, 적용된다.
- 내 부분의 경우, <script> 태그로 XMLHttpRequest를 사용해, NexPlayer 리소스를 요청 했기 때문에 발생
반응형