Node.js渲染HTML文件加载静态资源报MIME类型错误

使用Node.js搭建Web服务器，集成socket.io与WebRTC实现应用内音频流功能，配置/audio路由渲染对应HTML文件，服务端代码如下：

const webServer = http.createServer(app);

const socketIo = require("socket.io")(webServer); // 引入socket.io模块

app.use( '/assets', express.static( path.join( __dirname, 'assets' ) ) );

// 渲染音频页面
app.get( '/audio', ( req, res ) => {
  res.sendFile( __dirname + '/index.html' );
} );

HTML文件内静态资源引入代码如下：

<link rel="stylesheet" href='assets/css/app.css' type="text/css">
<script type="module" src='./assets/js/rtc.js'></script>
<script type="module" src='./assets/js/events.js'></script>
<script type="module" src='./assets/js/autolink.js'></script>

访问/audio路径时，所有CSS、JS资源加载失败，浏览器控制台抛出MIME类型错误，已尝试通用公开解决方案均无效。

静态资源加载失败的核心原因是相对路径解析错位：

• 当前页面访问路径为/audio，属于一级子路径，浏览器解析相对路径资源时，会以当前页面路径为基准拼接
• 现有资源写法assets/css/app.css、./assets/js/rtc.js属于相对路径，最终会被解析为/audio/assets/xxx，而非预期的站点根目录下/assets/xxx路径
• 服务端仅配置了/assets前缀的静态资源映射规则，/audio/assets开头的请求无法命中静态资源逻辑，会默认返回HTML格式的页面内容，浏览器收到HTML内容却按CSS、JS规则解析，直接触发MIME类型不匹配错误。

将HTML中所有静态资源的引用路径改为根路径绝对寻址，移除相对路径前缀，修改后代码如下：

<link rel="stylesheet" href='/assets/css/app.css' type="text/css">
<script type="module" src='/assets/js/rtc.js'></script>
<script type="module" src='/assets/js/events.js'></script>
<script type="module" src='/assets/js/autolink.js'></script>

修改完成后使用Ctrl+F5强制刷新浏览器清除缓存即可正常加载资源，无需调整服务端现有配置。

校验方式：打开浏览器开发者工具网络面板，确认静态资源请求路径为/assets/xxx格式即可，若仍存在/audio前缀属于本地缓存未清理，重复硬刷新操作即可。

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