纯HTML/CSS/PHP网站跳转Three.js页面遇MIME类型错误求助

问题场景 #

搭建纯HTML/CSS/PHP网站时，设置按钮跳转至Three.js页面，跳转代码如下：

<body>
    <h1>Welcome to the PHP Website</h1>
    <button onclick="redirectToThreeJS()">Go</button>

    <script>
        function redirectToThreeJS() {
            window.location.href = "three/index.html";
        }
    </script>
</body>

Three.js页面使用了模块类型脚本：<script type="module" src="src/main.jsx"></script>，点击跳转后仅显示页面标题，Three.js程序无法运行，控制台报错：

main.jsx:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

解决方案 #

1. 配置服务器正确识别.jsx文件的MIME类型 #

浏览器加载type="module"的脚本时，要求服务器返回标准的text/javascript MIME类型，但多数服务器默认不识别.jsx后缀，导致返回空MIME类型触发报错。根据你使用的服务器类型配置：

• Apache服务器：在网站根目录或three文件夹下创建/修改.htaccess文件，添加：

  AddType text/javascript .jsx
  

• Nginx服务器：在对应server配置块中添加MIME映射：

  types {
      text/javascript js jsx;
  }
  

• PHP内置开发服务器：由于它默认不支持.htaccess，可以创建一个router.php脚本：

  <?php
  $requestPath = $_SERVER['REQUEST_URI'];
  $fileExt = pathinfo($requestPath, PATHINFO_EXTENSION);
  
  if ($fileExt === 'jsx') {
      header('Content-Type: text/javascript');
      readfile(__DIR__ . $requestPath);
      exit;
  }
  
  // 其他请求交给默认处理
  return false;
  

  启动服务器时指定路由脚本：

  php -S localhost:8000 router.php
  

2. 验证文件路径正确性 #

检查src/main.jsx的路径是否相对于three/index.html正确。如果路径错误导致服务器返回404页面，也会触发MIME类型错误（因为404页面的MIME类型不是text/javascript）。

3. 简化方案：重命名.jsx文件为.js #

如果不想配置服务器MIME类型，直接将main.jsx重命名为main.js，并修改Three.js页面的脚本标签：

<script type="module" src="src/main.js"></script>

.js后缀是服务器默认识别的JavaScript文件类型，会自动返回正确的MIME类型。

原因说明 #

HTML规范对模块脚本的MIME类型检查有严格要求，服务器必须返回text/javascript（或相关JavaScript类MIME类型），否则浏览器会拒绝加载脚本。.jsx属于非标准后缀，未在服务器默认MIME映射中，因此返回空MIME类型导致加载失败。

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