Node.js服务HTML页面时静态资源链接失效问题排查

Hey there! Let's figure out why your static resources aren't loading and fix this step by step.

Right now, your code only reads and returns the login_nimda.html file directly to the browser—but you haven't configured your Node.js server to handle requests for static assets like CSS files. When the browser parses the HTML and tries to fetch the linked CSS, it sends a new request to your server, but there's no route or middleware set up to respond to that request. That's why your local CSS fails to load, while the Bootstrap CDN works (since those requests go to Bootstrap's servers, not yours).

First, let's assume your project structure looks something like this (based on your description):

your-project/
├── server/
│   └── nimda.js
└── static/
    ├── login_nimda.html
    └── css/
        └── your-local-styles.css

You need to use Express's built-in express.static middleware to host your static files. Here's how to update your nimda.js:

const express = require('express');
const path = require('path');
const router = express.Router();
const app = express();

// 🔑 Critical step: Host all static files in the "static" directory
app.use(express.static(path.join(__dirname, '../static')));

// Simplify your root route with res.sendFile (it handles headers automatically)
router.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, '../static/login_nimda.html'));
});

app.use('/', router);

// Start your server (adjust port as needed)
app.listen(3000, () => {
  console.log('Server up on port 3000!');
});

The express.static middleware tells Express: "When a request comes in for a file (like a CSS or image), look for it in the ../static directory and send it back to the browser."

Your root-relative path wasn't working before because the server didn't know how to handle those requests. Now with the static middleware set up, make sure your href path is relative to the static directory:

For example, if your CSS file lives at static/css/bootstrap.css, your link tag should look like this:

<link rel="stylesheet" href="/css/bootstrap.css">

• The leading / makes this a root-relative path, which works no matter what route your HTML is served from (like / in your case).
• Avoid relative paths like ../css/bootstrap.css—these can break if your HTML is served from a subroute, and they're less reliable than root-relative paths for static assets.

• Ditch fs.readFileSync for HTML files: res.sendFile automatically sets the correct Content-Type header and handles file paths more reliably than manual file reading.
• Double-check path case: If you're on Linux or macOS, file paths are case-sensitive—make sure your href matches the actual file name exactly (e.g., Bootstrap.css vs bootstrap.css matters).

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