ExpressJS站点仅JavaScript文件无法加载问题排查求助

排查思路及解决方案 #

• 首先检查script标签的属性是否正确：script加载外部资源必须使用src属性，而非href属性。你提到script标签的href链接可正常访问，大概率是写错了属性名，浏览器识别不到要加载的脚本资源，自然不会发起对应请求，网络面板也就不会有相关记录。
• 检查页面原始返回的HTML源码：不要只看开发者工具的元素面板，右键选择「查看网页源代码」，确认script标签没有被模板引擎转义（比如变成<script>）、也没有缺少闭合标签，导致浏览器无法正确识别为脚本标签。
• 排查Content Security Policy（CSP）限制：如果站点配置了CSP规则，不符合规则的脚本请求会被浏览器直接拦截，不会出现在网络面板中。你可以查看控制台的报错面板，是否有CSP相关的报错提示，同时检查服务端响应头中是否有Content-Security-Policy相关字段。
• 排查Service Worker拦截：如果之前注册过Service Worker，可能会拦截静态资源请求。你可以在开发者工具的「应用」面板找到Service Worker选项，勾选「绕过缓存」或者直接注销当前域名的所有Service Worker后重试。
• 验证render相关的猜测：你可以临时修改根路由配置，用sendFile返回页面测试：

const path = require('path');
app.get('/', (req, res)=>{ 
  // 路径按你实际的模板文件位置调整
  res.sendFile(path.join(__dirname, 'views', 'index.html')) 
})

如果修改后可以正常加载JS，说明问题出在模板引擎配置或者模板文件本身，如果还是异常即可排除render的影响。

• 调整脚本引用路径为绝对路径：如果当前用的是相对路径引用脚本（比如./js/index.js），可以改成从站点根目录开始的绝对路径（比如/js/index.js），避免路径解析异常。

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