[Three.js] Three.js Access to script at 'https://unpkg.com/three/examples/jsm/controls/OrbitControls.js' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 문제

IT/Three.js / / 2025. 3. 17.
반응형

Three.js 라이브러리를 사용하기 위해 ES 모듈을 사용하는데 아래와 같이 Scripte 단에서 importmap 안에 있는 imports에 각 속성을 매핑을 시킨다.

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.js",
			"three/addons/": "https://unpkg.com/three/examples/jsm/"
		}
	}
</script>

 

위의 방식대로 잘 사용하고 있었는데, 어느 순간에 아래와 같은 에러가 발생했다.

Access to script at 'https://unpkg.com/three/examples/jsm/controls/OrbitControls.js' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

 

결국엔 그 악명 높은 CORS 에러가 발생한 것이다.

해결 방법

솔직히 말해서, 이 문제의 해결 방법은 따로 없었다.

실질적으로, 다른 컴퓨터에서도 위의 url에 접속을 해도 똑같은 CORS 에러가 발생했다.

즉, 다른 네트워크에 있었던 컴퓨터에서도 접속을 하니 CORS 에러가 발생을 했고, 결국에는 우리가 request를 보내면 response 헤더에 Access allow origin 출처가 맞지 않아 CORS 에러가 발생했다.

 

그래서, 위의 문제를 해결하기 위해서는 위의 방법이 아닌 Three.js 파일을 다운로드를 받아 해당 폴더로 경로를 바꿔 js 를 가져오는게 해결 방법이다.

반응형
저작자표시

'IT > Three.js' 카테고리의 다른 글

[Three.js] Three.js Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". 문제 해결 방법  (0) 2025.03.31
[Three.js] Three.js 다양한 도형 객체 group으로 렌더링하는 방법  (0) 2025.03.19
[Three.js] Three.js 특정 도형 마우스 클릭 시 툴팁(Tooltip) 출력되도록 구현하기  (0) 2025.03.18
[Three.js] Three.js 테두리 제거하는 방법(wireframe)  (0) 2025.03.17
[Three.js] Three.js THREE.Color: Unknown color 0x3C33FF 문제 해결 방법  (0) 2025.03.14
[Three.js] Three.js 마우스휠 줌인(Zoom-In), 줌아웃(Zoom-Out) 구현하기  (0) 2025.03.05
[Three.js] Three.js Camera updateProjectionMatrix 정리  (0) 2025.02.26
[Three.js] Three.js 원점 맞춰서 박스 객체 그리기  (0) 2025.02.07
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기
IT/Three.js 관련 글
글 더보기

코집사님의
글이 좋았다면 응원을 보내주세요!

티스토리툴바

*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*