由于不允许的 MIME 类型 (“”),加载模块被阻止

Nul*_*lad 5 javascript python simplehttpserver mime-types

我正在查看一个 Three.js 示例,当我import在 javascript 模块中使用时,出现错误:\nLoading module from \xe2\x80\x9chttp://localhost:8000/build/three.module.js\xe2\x80\x9d was blocked because of a disallowed MIME type (\xe2\x80\x9c\xe2\x80\x9d).

\n

当我使用脚本标记传统导入时,我不会收到此错误。这是我的代码:

\n

注释掉的线将渲染一个旋转的立方体

\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>My first three.js app</title>\n        <style>\n            body { margin: 0; }\n        </style>\n    </head>\n    <body>\n        <script type="module">\n\n            import * as THREE from '/build/three.module.js';\n            // const scene = new THREE.Scene();\n            // const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );\n\n            // const renderer = new THREE.WebGLRenderer();\n            // renderer.setSize( window.innerWidth, window.innerHeight );\n            // document.body.appendChild( renderer.domElement );\n\n            // const geometry = new THREE.BoxGeometry();\n            // const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );\n            // const cube = new THREE.Mesh( geometry, material );\n            // scene.add( cube );\n\n            // camera.position.z = 5;\n\n            // const animate = function () {\n            //  requestAnimationFrame( animate );\n\n            //  cube.rotation.x += 0.01;\n            //  cube.rotation.y += 0.01;\n\n            //  renderer.render( scene, camera );\n            // };\n\n            // animate();\n        </script>\n    </body>\n</html>\n
Run Code Online (Sandbox Code Playgroud)\n

相比之下,这工作得很好:

\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>My first three.js app</title>\n        <style>\n            body { margin: 0; }\n        </style>\n    </head>\n    <body>\n        <script src="build/three.js"></script>\n        <script>\n        // ...\n        </script>\n    </body>\n</html>\n
Run Code Online (Sandbox Code Playgroud)\n

我的文件结构是:

\n
|_index.html\n|_ ...\n|_build/\n    |_ three.module.js\n    |_ three.js\n    |_ ...\n\n
Run Code Online (Sandbox Code Playgroud)\n

import为什么在模块中使用时会出现 MIME 类型错误?我希望能够使用这个导入方法,因为所有其他的 Three.js 示例似乎都是在 JS 模块中执行此操作。

\n

Don*_*ith 2

Loading module from \xe2\x80\x9chttp://localhost:8080/build/three.module.js\xe2\x80\x9d was blocked because of a disallowed MIME type (\xe2\x80\x9c\xe2\x80\x9d).当我在文件夹中启动 http 服务器时,我收到相同的错误消息three_js/examples/。启动 http-server 可以three_js/解决这个问题。原因是我的导入声明是import * as THREE from '../build/three.module.js';. 我不确定这是否能解决您的确切问题,但它似乎密切相关。

\n