加载three.module.js因MIME类型被拦截问题求助

核心原因 #

浏览器加载ES模块时，要求服务器返回的文件必须带有application/javascript（或兼容的模块MIME类型）的Content-Type头。你的XAMPP服务器可能没有为.module.js后缀的文件配置正确的MIME类型，而.js后缀的OrbitControls.js能被服务器正常识别，所以不会被拦截。

解决方案 #

1. 给XAMPP添加.module.js的MIME类型配置 #

• 打开XAMPP控制面板，点击Apache的Config按钮，选择Apache (httpd.conf)
• 在文件中搜索AddType，找到相关配置区域后添加一行：

  AddType application/javascript .js .module.js
  

• 或者选择打开Apache (mime.types)，找到application/javascript那一行，在末尾加上.module.js，修改后如下：

  application/javascript          js module.js
  

• 保存配置后重启Apache服务器。

2. 确保HTML中的script标签声明为模块类型 #

你的HTML文件中，引入JS代码的script标签必须加上type="module"，否则浏览器会把它当作普通脚本处理，直接导致模块导入失败：

<script type="module" src="path/to/your/script.js"></script>

如果是内联脚本，同样需要添加该属性：

<script type="module">
// 你的模块代码
</script>

3. 统一使用相对路径导入 #

避免使用绝对URL导入模块，改用相对路径减少潜在问题，比如把：

import * as THREE from 'http://localhost/globe/js/three.module.js';

改成：

import * as THREE from './js/three.module.js';

（注意：路径需根据你的JS文件实际位置调整，如果这段代码是globe.html的内联脚本，上述路径是正确的；如果是单独的JS文件，要对应修改相对层级）

4. 清除浏览器缓存 #

浏览器可能缓存了旧的响应头，即使服务器配置修改也不会立即生效。可以按Ctrl+Shift+R（Chrome/Edge）或Ctrl+Shift+Delete清除缓存后，重新加载页面。

5. 验证OrbitControls的模块兼容性 #

确保你使用的OrbitControls是适配ES模块的版本（比如从three.js官方渠道获取的模块版本），旧版本的OrbitControls可能不是模块格式——不过你当前能正常导入该文件，这一步可作为备选排查项。

内容的提问来源于stack exchange，提问作者remiau