如何用核心Node.js部署静态文件？HTTPS下CSS/字体文件失效求助

核心实现代码 #

以下是完整的静态文件服务实现，支持HTTP/HTTPS场景，覆盖路径解析、MIME类型处理、错误拦截等核心逻辑：

const http = require('http');
const https = require('https');
const fs = require('fs');
const path = require('path');
const url = require('url');

// 自定义MIME类型映射，覆盖静态资源常用类型
const mimeTypes = {
  '.html': 'text/html',
  '.js': 'text/javascript',
  '.css': 'text/css',
  '.json': 'application/json',
  '.png': 'image/png',
  '.jpg': 'image/jpg',
  '.gif': 'image/gif',
  '.svg': 'image/svg+xml',
  '.woff': 'application/font-woff',
  '.woff2': 'application/font-woff2',
  '.ttf': 'application/font-ttf',
  '.eot': 'application/vnd.ms-fontobject',
  '.otf': 'application/font-otf'
};

// 静态文件处理核心函数
function serveStatic(req, res, rootDir = './public') {
  const parsedUrl = url.parse(req.url);
  let pathname = parsedUrl.pathname;

  // 根路径默认返回index.html
  if (pathname === '/') {
    pathname = '/index.html';
  }

  // 拼接绝对路径，防止路径遍历攻击
  const safePath = path.normalize(pathname).replace(/^(\.\.[\/\\])+/, '');
  const filePath = path.join(__dirname, rootDir, safePath);

  const ext = path.extname(filePath);

  // 检查文件是否存在
  fs.access(filePath, fs.constants.F_OK, (err) => {
    if (err) {
      res.writeHead(404, { 'Content-Type': 'text/html' });
      res.end('<h1>404 Not Found</h1>');
      return;
    }

    // 处理目录请求，返回目录下的index.html
    fs.stat(filePath, (err, stats) => {
      if (err) {
        res.writeHead(500);
        res.end('Server Error');
        return;
      }
      if (stats.isDirectory()) {
        serveStatic(req, res, rootDir + pathname);
        return;
      }

      // 设置正确的Content-Type
      const contentType = mimeTypes[ext] || 'application/octet-stream';
      res.writeHead(200, { 'Content-Type': contentType });

      // 流式传输文件
      const stream = fs.createReadStream(filePath);
      stream.pipe(res);
      stream.on('error', () => {
        res.writeHead(500);
        res.end('Server Error');
      });
    });
  });
}

// 启动HTTP服务（本地开发用）
const httpServer = http.createServer((req, res) => {
  serveStatic(req, res);
});
httpServer.listen(8080, () => {
  console.log('HTTP server running on port 8080');
});

// 启动HTTPS服务（部署用，替换为你的证书路径）
const httpsOptions = {
  key: fs.readFileSync('./private-key.pem'),
  cert: fs.readFileSync('./certificate.pem')
};
const httpsServer = https.createServer(httpsOptions, (req, res) => {
  serveStatic(req, res);
});
httpsServer.listen(8443, () => {
  console.log('HTTPS server running on port 8443');
});

HTTPS环境下静态资源加载失败的排查与解决 #

1. 混合内容问题 #

如果页面通过HTTPS访问，但静态资源引用用了HTTP协议（比如<link href="http://xxx/style.css">），浏览器会因安全策略阻止加载。

• 解决：所有静态资源使用相对路径（如/style.css）或HTTPS绝对路径，确保与页面协议一致。

2. MIME类型缺失 #

核心Node.js不会自动识别所有文件类型，若css、字体文件未设置正确的Content-Type，浏览器无法解析。

• 解决：确保代码中mimeTypes对象包含对应资源的MIME类型，可根据需求自行补充。

3. 路径或权限问题 #

部署环境中，Node进程可能无public文件夹读取权限，或路径拼接错误导致文件找不到。

• 解决：
  • 检查filePath拼接逻辑，代码中已通过path.normalize和../过滤防止路径遍历。
  • 确认部署服务器上public文件夹的权限，确保运行Node进程的用户有读取权限。

4. SSL证书问题 #

无效证书（自签名、过期、域名不匹配）会导致浏览器中断资源请求。

• 解决：使用有效SSL证书（如Let's Encrypt免费证书），确保证书域名与部署域名一致。

5. 缓存问题 #

浏览器缓存了旧的HTTP资源路径，导致HTTPS环境下加载失败。

• 解决：强制刷新浏览器缓存（Ctrl+Shift+R），或给静态资源添加版本号（如style.css?v=1.0.0）。

验证方法 #

部署后用浏览器开发者工具的网络面板查看失败请求：

• 404：文件路径错误，检查文件是否存在、路径拼接是否正确。
• 403：权限问题，调整文件夹读取权限。
• 混合内容警告：检查资源请求协议是否与页面一致。
• 500：服务器内部错误，查看Node进程日志定位问题。

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