express.static未按预期处理请求，页面静态JS文件无法加载

问题描述 #

我用Node.js编写了服务端文件server.js，想要在页面中加载静态JS文件，但一直没能成功实现。相关代码及请求失败截图如下：

server.js代码 #

import express from "express";
import fs from 'fs';

const app = express();
const home = fs.readFileSync("/Users/divyanshundley/Documents/TS/public/index.html");

app.use('/static', express.static('/static'));

app.get("/", (req, res) => res.redirect('/home'));

app.get('/home', (req, res) => {
    res.end(home);
});

app.listen(18209, () => {
    console.log('server running on port 18209   ');
});

index.html代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MAIN</title>
    <script src="./index.js" defer></script>
</head>
<body>
    <h1 id="MAINHEADING">Hello</h1>
</body>
</html>

问题原因及解决方案 #

• 静态资源路径配置错误
  你当前express.static传入的/static是系统根目录的绝对路径，并非实际存放静态文件的目录。假设index.js和index.html都在/Users/divyanshundley/Documents/TS/public下，需修改静态资源配置：

  // 无前缀的配置方式
  app.use(express.static('/Users/divyanshundley/Documents/TS/public'));
  

  如果想给静态资源加/static前缀，要同时调整HTML中的脚本路径：

  // 带前缀的配置方式
  app.use('/static', express.static('/Users/divyanshundley/Documents/TS/public'));
  

  对应的HTML脚本路径改为：

  <script src="/static/index.js" defer></script>
  

• 直接返回HTML文件的问题
  用fs.readFileSync读取HTML后直接res.end(home)，会导致Express无法正确解析HTML中的相对路径映射。建议改用res.sendFile返回HTML：

  app.get('/home', (req, res) => {
      res.sendFile('/Users/divyanshundley/Documents/TS/public/index.html');
  });
  

• 验证文件位置
  确认index.js确实存放在/Users/divyanshundley/Documents/TS/public目录下，和index.html处于同一层级，避免因文件缺失导致404错误。

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