Safari加载服务器端ES6模块报错：'text/html'非有效JS MIME类型求助

根据你描述的情况，问题的核心根源已经很明确了：你使用的免费主机infinityfree.net在处理远程请求的.js文件时，不仅返回了错误的MIME类型（text/html），还篡改了文件内容——这也是为什么只有在远程服务器的Safari中才会触发错误，其他环境/浏览器不受影响的原因。

下面是针对性的解决思路和方案：

1. 确认主机的文件篡改行为 #

先通过Safari开发者工具验证问题：

• 打开开发者工具（Cmd+Opt+I），切换到「网络」标签
• 刷新页面，找到test_class.js的请求，查看「响应头」里的Content-Type，如果显示的是text/html而非application/javascript，就坐实了主机的问题。
• 同时查看「响应」内容，应该能看到被替换的包含aes.js和跳转的HTML代码，这就是Safari无法解析模块的直接原因。

2. 尝试绕过主机的文件重写机制 #

方案A：改用ES6模块专用扩展名.mjs #

很多免费主机的篡改规则只针对.js文件，换成.mjs（ES6模块的标准扩展名）可能能避开：

• 将test_class.js重命名为test_class.mjs
• 修改HTML中的导入语句：

  import { TestClass } from './test_class.mjs';
  

  这个方法的原理是主机可能没有针对.mjs文件配置篡改规则，能让服务器正确返回application/javascript的MIME类型和原始文件内容。

方案B：临时内嵌模块代码 #

如果换扩展名无效，可以把模块代码直接内嵌到HTML的模块脚本中，绕过文件请求：

<!DOCTYPE html>
<script type="module">
console.log("Starting the main script.");
// 直接在脚本里定义类
class TestClass {
  constructor() {
    console.log("Created a test class");
  }
}
let test_class = new TestClass;
console.log("Done.");
</script>

这个方法适合小型模块，能快速恢复网站功能，但不利于代码维护。

3. 联系主机客服反馈问题 #

向infinityfree的客服提交反馈，明确说明：

• 你的.js文件被服务器替换成了HTML内容
• 返回的Content-Type是text/html，导致Safari无法加载ES6模块
• 提供你的文件路径和测试截图（开发者工具的网络请求截图）
  部分免费主机会针对这类问题调整规则，或者给你提供解决方案。

4. 更换更可靠的主机（终极方案） #

如果上述方法都无效，建议更换到不会篡改静态文件的主机：

• 免费层可以考虑专注静态站点的平台，它们对ES6模块有良好的支持，不会篡改你的文件内容。
• 如果需要动态功能，也可以选择一些入门级的付费主机，这类服务的稳定性和规范性都远优于部分免费主机。

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