테스트 배포시 에러가 발생합니다.

Question

http://127.0.0.1:3305/ex03_hello_world_designer.html 주소로 이동했습니다. ex03_hello_world_designer.js:9 Uncaught (in promise) DataCloneError: Failed to execute 'postMessage' on 'Worker': SharedArrayBuffer transfer requires self.crossOriginIsolated. at ex03_hello_world_designer.js:9:16758 at new Promise () at loadWasmModuleToWorker (ex03_hello_world_designer.js:9:15451) at Array.map () at Object.loadWasmModuleToAllWorkers (ex03_hello_world_designer.js:9:16962) at ex03_hello_world_designer.js:9:14758 at ex03_hello_world_designer.js:9:17642 at Array.forEach () at callRuntimeCallbacks (ex03_hello_world_designer.js:9:17631) at preRun (ex03_hello_world_designer.js:9:7603) (익명) @ ex03_hello_world_designer.js:9 loadWasmModuleToWorker @ ex03_hello_world_designer.js:9 loadWasmModuleToAllWorkers @ ex03_hello_world_designer.js:9 (익명) @ ex03_hello_world_designer.js:9 (익명) @ ex03_hello_world_designer.js:9 callRuntimeCallbacks @ ex03_hello_world_designer.js:9 preRun @ ex03_hello_world_designer.js:9 run @ ex03_hello_world_designer.js:9 runCaller @ ex03_hello_world_designer.js:9 removeRunDependency @ ex03_hello_world_designer.js:9 receiveInstance @ ex03_hello_world_designer.js:9 receiveInstantiationResult @ ex03_hello_world_designer.js:9 Promise.then (익명) @ ex03_hello_world_designer.js:9 Promise.then instantiateAsync @ ex03_hello_world_designer.js:9 createWasm @ ex03_hello_world_designer.js:9 (익명) @ ex03_hello_world_designer.js:9 qtLoad @ qtloader.js:231 await in qtLoad init @ ex03_hello_world_designer.html:53 onload @ ex03_hello_world_designer.html:24 http://127.0.0.1:3305/ex03_hello_world_designer.html 주소로 이동했습니다. ex03_hello_world_designer.js:9 Uncaught (in promise) DataCloneError: Failed to execute 'postMessage' on 'Worker': SharedArrayBuffer transfer requires self.crossOriginIsolated. at ex03_hello_world_designer.js:9:16758 at new Promise () at loadWasmModuleToWorker (ex03_hello_world_designer.js:9:15451) at Array.map () at Object.loadWasmModuleToAllWorkers (ex03_hello_world_designer.js:9:16962) at ex03_hello_world_designer.js:9:14758 at ex03_hello_world_designer.js:9:17642 at Array.forEach () at callRuntimeCallbacks (ex03_hello_world_designer.js:9:17631) at preRun (ex03_hello_world_designer.js:9:7603) (익명) @ ex03_hello_world_designer.js:9 loadWasmModuleToWorker @ ex03_hello_world_designer.js:9 loadWasmModuleToAllWorkers @ ex03_hello_world_designer.js:9 (익명) @ ex03_hello_world_designer.js:9 (익명) @ ex03_hello_world_designer.js:9 callRuntimeCallbacks @ ex03_hello_world_designer.js:9 preRun @ ex03_hello_world_designer.js:9 run @ ex03_hello_world_designer.js:9 runCaller @ ex03_hello_world_designer.js:9 removeRunDependency @ ex03_hello_world_designer.js:9 receiveInstance @ ex03_hello_world_designer.js:9 receiveInstantiationResult @ ex03_hello_world_designer.js:9 Promise.then (익명) @ ex03_hello_world_designer.js:9 Promise.then instantiateAsync @ ex03_hello_world_designer.js:9 createWasm @ ex03_hello_world_designer.js:9 (익명) @ ex03_hello_world_designer.js:9 qtLoad @ qtloader.js:231 await in qtLoad init @ ex03_hello_world_designer.html:53 onload @ ex03_hello_world_designer.html:24 릴리스 선택후 빌드한 html를 브라우저에 띄워서 테스트 해보니 로딩이 끝나지 않습니다. 실제 브라우저에 배포하려면 설정이 더 필요한걸 까요?

김대진 · Answer

안녕하세요. geekgleeguru 님, 에러 메시지와 현재 상황을 보면, Qt for WebAssembly 애플리케이션이 브라우저에서 SharedArrayBuffer 를 사용하려고 시도하는데, 이 기능을 사용하려면 웹 페이지가 crossOriginIsolated 되어야 합니다. 즉, 브라우저에서 로컬 서버( http://127.0.0.1)를 통해 Qt WebAssembly를 실행할 때 필요한 보안 헤더가 빠졌기 때문에 WebAssembly 모듈이 제대로 로딩되지 못하고 로딩 화면에서 멈춰 있는 것입니다.   원인: Qt WebAssembly는 성능 향상을 위해 SharedArrayBuffer를 사용하려고 하며, 이를 위해서는 다음 조건을 모두 충족해야 함: HTTPS 또는 localhost 에서 서비스되어야 함 HTTP 응답 헤더에 다음 두 항목이 반드시 포함되어야 함: Cross-Origin-Opener-Policy: same-origin Cross-Origin-Embedder-Policy: require-corp 혹시 더 궁금한게 있으면 언제든 질문해 주세요. 감사합니다. 김대진 드림.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. geekgleeguru님의 질문에 대한 답변을 드리겠습니다. 현재 &ldquo;DataCloneError&rdquo;와 관련된 에러는 WebAssembly 환경에서의 SharedArrayBuffer 사용과 관련이 있습니다. SharedArrayBuffer는 브라우저에서 안전한 환경, 즉 cross-origin isolation이 설정되어야 사용이 가능합니다. 아래 문제 해결을 위한 몇 가지 사항을 정리해 보았습니다. 문제 요약 SharedArrayBuffer 를 사용할 때 self.crossOriginIsolated 가 true 로 설정되어야 합니다. DataCloneError 는 브라우저가 메모리를 관리할 수 없는 상태일 때 발생합니다. 해결 방법 강화된 보안 설정(CORS 및 COOP/COEP 적용) : 브라우저에서 cross-origin isolation을 지켜야 하며, 이를 위해 COOP(Cross-Origin Opener Policy)와 COEP(Cross-Origin Embedder Policy) 헤더를 설정해야 합니다. ex03_hello_world_designer.html 파일을 호스팅할 때, 웹 서버 설정에서 다음 헤더를 추가해야 합니다: Cross-Origin-Opener-Policy: same-origin Cross-Origin-Embedder-Policy: require-corp 서버 설정 확인 : 이 설정이 적용되려면 파일을 로컬 서버에서가 아닌 실제 서버에서 로드하는 것이 권장됩니다. 기본적인 로컬 파일 접근은 이러한 보호 기능이 적용되지 않기 때문입니다. 가능한 서버 환경: Node.js 서버나 간단한 Python HTTP 서버 등을 사용할 수 있습니다. 예시: python3 -m http.server 3305 웹 브라우저의 버전 확인 : 최신 브라우저가 필요할 수 있습니다. 특히 WebAssembly와 관련된 최신 보안 업데이트가 필요한 경우입니다. 테스트 및 디버그 : 서버 상에서 페이지를 테스트하고, 브라우저의 개발자 도구의 &lsquo;네트워크&rsquo; 탭을 통해서 적절한 헤더가 잘 전달되는지 확인할 수 있습니다. 추가적으로 참고할 자료: MDN Web Docs - Cross-Origin Opener Policy MDN Web Docs - Cross-Origin Embedder Policy 이 해결 방법들이 도움이 되길 바라며, 추가적으로 궁금한 점이 있거나 문제가 지속된다면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.