express.static配置静态目录后无法返回app.js、style.css文件求解决方案

排查解决步骤 #

• 1. 确认前端请求路径是否正确
     检查浏览器控制台中请求的app.js、style.css完整路径是否为{你的服务域名}/p/app.js、{你的服务域名}/p/style.css，如果请求的是根路径下的/app.js，说明前端html里的资源引用路径配置错误，将引用路径改为相对路径./app.js或者带前缀的绝对路径/p/app.js即可。
• 2. 修正静态资源目录的路径配置
     你当前写的express.static('/public/p')指向的是操作系统根目录下的/public/p路径，并非项目内的server/public/p目录，属于高频错误点。建议用path模块拼接项目绝对路径，避免相对路径和node进程启动目录不匹配的问题：

const path = require('path')
// 替换原有的express.static配置
app.use('/p', checkAuth.refresh, express.static(path.join(__dirname, 'public', 'p')), publicRoutes);

修改完成后重启服务测试访问。

• 3. 排除鉴权中间件拦截问题
     临时注释掉checkAuth.refresh中间件，重启服务后直接请求两个目标文件，如果可以正常返回，说明鉴权逻辑中存在规则过滤了这两个文件的请求，修改鉴权逻辑放行静态资源路径即可。
• 4. 排查路由冲突问题
     express中间件按注册顺序执行，如果publicRoutes中存在匹配/p/app.js、/p/style.css的路由规则，会覆盖静态资源的返回结果。可以调整中间件顺序，把静态资源处理逻辑放到业务路由之前：

// 静态资源不需要鉴权的话可以把鉴权中间件放到静态资源后面
app.use('/p', express.static(path.join(__dirname, 'public', 'p')), checkAuth.refresh, publicRoutes);

调整后测试是否正常。

• 5. 检查文件名合法性
     确认server/public/p目录下的文件名完全匹配app.js、style.css，没有隐形空格、大小写差异（Linux环境下文件名大小写敏感，App.js和app.js会被识别为不同文件）。
• 6. 开启Debug日志精确定位
     启动服务时添加express debug参数，观察请求的中间件执行链路：

# Linux/Mac 启动命令
DEBUG=express:* node app.js
# Windows cmd 启动命令
set DEBUG=express:* & node app.js

请求目标文件时查看日志，确认请求是否进入了静态资源处理逻辑、是否命中对应文件，即可定位404的产生环节。

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