NodeJS-Express无法加载主目录内文件的问题求助

文件夹结构 #

main_folder
├──web
│  ├──files_located_here
│  │  ├──dog.jpg
│  │  ├──cat.jpg
│  │  ├──bat.jpg
│  │  └──rat.jpg    
│  ├──app.js
│  ├──package.json
│  └──package-lock.json

现有app.js代码 #

const CORS = require('cors');
const EXPR = require('express');
const app    = EXPR();
const router = EXPR.Router();

app
  .use(CORS())
  .use('/', router)
  .use(EXPR.urlencoded({ extended: false }));

router.get('/', (req, res) => {
  req.accepts(['json', 'text'])
  res.setHeader('content-type', 'text/html')
  res.json("sup")
});

app.listen(12, () => 
  console.log("ctrl + click => http://123.123.0.12:12/"));

当前根路径http://123.123.0.12:12/可正常访问，但访问http://123.123.0.12:12/files_located_here/cat.jpg时出现Cannot GET /files_located_here/cat.jpg错误。曾在Windows环境按教程操作可正常运行，但当前环境下用普通目录无法访问该文件夹，尝试过EXPR.static也无效。疑问：是权限问题？还是服务器未配置允许网络访问？

这既不是权限问题也不是网络访问配置问题，核心是你没正确配置Express的静态文件服务，或者配置顺序不对导致没生效。

• 首先，Express不会自动对外暴露任何本地目录，必须通过express.static明确指定要对外开放的静态资源目录。你的代码里完全没配置这部分，或者之前尝试的配置位置不对。
• 其次，express.static的配置顺序很关键：它必须放在路由配置之前，否则请求会先被路由拦截，静态文件服务根本没机会处理请求。

正确的配置方式如下（修改你的app.js）：

const CORS = require('cors');
const EXPR = require('express');
const path = require('path'); // 引入path模块处理跨平台路径
const app    = EXPR();
const router = EXPR.Router();

// 先配置静态文件服务：将/files_located_here路径映射到本地的files_located_here文件夹
app.use('/files_located_here', EXPR.static(path.join(__dirname, 'files_located_here')));

app
  .use(CORS())
  .use('/', router)
  .use(EXPR.urlencoded({ extended: false }));

router.get('/', (req, res) => {
  req.accepts(['json', 'text'])
  res.setHeader('content-type', 'text/html')
  res.json("sup")
});

app.listen(12, () => 
  console.log("ctrl + click => http://123.123.0.12:12/"));

• 如果你之前尝试过express.static但没生效，大概率是路径写错了：比如你可能把路径指向了main_folder而不是web/files_located_here，或者没使用path.join处理跨平台路径（Windows和类Unix系统路径分隔符不同）。
• 另外，确认你启动服务的工作目录：如果是在main_folder下启动node web/app.js，__dirname依然是web目录（因为__dirname是当前脚本文件所在的目录），所以上面的路径配置是正确的。

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