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

【问题标题】：Loading module from was blocked because of a disallowed MIME type (“”)由于不允许的 MIME 类型 (“”)，加载模块被阻止
【发布时间】：2023-04-04 12:26:01
【问题描述】：

我正在浏览一个 three.js 示例，当我在 javascript 模块中使用 import 时，我收到错误消息： Loading module from “http://localhost:8000/build/three.module.js” was blocked because of a disallowed MIME type (“”).

当我传统上使用脚本标签导入时，我没有收到此错误。这是我的代码：

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

<!DOCTYPE html>
<html>
    <head>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script type="module">

            import * as THREE from '/build/three.module.js';
            // const scene = new THREE.Scene();
            // const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

            // const renderer = new THREE.WebGLRenderer();
            // renderer.setSize( window.innerWidth, window.innerHeight );
            // document.body.appendChild( renderer.domElement );

            // const geometry = new THREE.BoxGeometry();
            // const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            // const cube = new THREE.Mesh( geometry, material );
            // scene.add( cube );

            // camera.position.z = 5;

            // const animate = function () {
            //  requestAnimationFrame( animate );

            //  cube.rotation.x += 0.01;
            //  cube.rotation.y += 0.01;

            //  renderer.render( scene, camera );
            // };

            // animate();
        </script>
    </body>
</html>

相比之下，这很好用：

<!DOCTYPE html>
<html>
    <head>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script src="build/three.js"></script>
        <script>
        // ...
        </script>
    </body>
</html>

我的文件结构是：

|_index.html
|_ ...
|_build/
    |_ three.module.js
    |_ three.js
    |_ ...

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

【问题讨论】：

您正在运行什么 http 服务器来提供这些文件？
使用 Python 2.7，我在根目录中运行 python -m SimpleHTTPServer
您是否尝试在路径'./build/three.module.js';? 之前使用. 加载真实的相对路径
您需要修复该服务器，以便为您的 javascript 文件发送正确的内容类型标头。参见例如ericduran.io/2017/10/09/js-modules-python-mime-type
@Bergi 但是根据您提供的链接，.js 已经是已知的 mime 类型。

标签： javascript python mime-types simplehttpserver

【解决方案1】：

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

【讨论】：