Node.js路由问题：二级路由下CSS/JS加载失败及MIME类型错误

问题1：设置X-Content-Type-Options: nosniff后出现脚本MIME类型错误 #

当你开启nosniff响应头时，浏览器会严格遵守服务器返回的Content-Type值，彻底放弃自动推断资源MIME类型的行为。出现这个错误的核心原因通常是：

• 服务器返回JS/CSS等静态资源时，没有正确设置对应的Content-Type头（比如JS需设为application/javascript，CSS设为text/css）；
• 路由逻辑返回了错误内容（比如误把HTML当成JS返回），导致浏览器拿到的内容与声明的MIME类型不匹配。

解决思路：

• 如果你用Express框架，优先用express.static中间件托管静态资源，它会自动为不同类型文件设置正确的Content-Type，还能自动处理文件存在性检查；
• 如果是手动读取文件返回，记得在res.send前手动设置响应头：

  // 针对JS文件示例
  res.setHeader('Content-Type', 'application/javascript');
  res.send(fs.readFileSync(__dirname + '/js/main.js', 'utf8'));
  

• 检查路由是否误将非静态资源路径指向了静态文件，导致返回内容不符合预期。

问题2：二级路由下CSS/JS无法加载 #

这个问题基本都是前端资源引用路径的问题。举个实际场景：

• 在/LimeLINE路由下时，页面里如果用相对路径引用资源（比如<script src="js/main.js"></script>），浏览器会解析为请求/js/main.js（因为当前路由是根级的/LimeLINE，相对路径默认以根目录为基准）；
• 但进入二级路由（比如/LimeLINE/user/profile）时，同样的相对路径会被浏览器解析为/LimeLINE/user/profile/js/main.js，这个路径显然不存在，所以加载失败。

解决思路：

• 把所有静态资源的引用改成绝对路径，比如<script src="/js/main.js"></script>、<link href="/css/style.css" rel="stylesheet">，这样不管当前路由是几级，浏览器都会从根目录开始查找资源；
• 或者在HTML的<head>标签里添加<base href="/">，强制页面内所有相对路径都以根目录为基准；
• 确保express.static中间件配置正确，比如：

  app.use(express.static(__dirname + '/public'));
  

  这样放在public/js、public/css里的资源，都能通过/js/xxx、/css/xxx直接访问到。

另外看你提供的首页路由代码，是手动拼接HTML文件，一定要注意拼接的组件里的资源引用路径是否统一用了绝对路径，不然很容易出现这种路由层级导致的路径问题。

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