Node.js Express服务器无法加载HTML中CSS文件的问题求助

1. HTML标签使用错误：<style>标签不支持src属性 #

浏览器不认可<style>标签通过src属性加载外部CSS文件，这是Firefox提示样式表加载失败的直接原因。iframe能显示CSS内容是因为它直接发起HTTP请求获取资源，和<style>标签的解析逻辑完全不同。

修复HTML代码：
将无效的<style>标签替换为标准的<link>标签引入样式表：

<!DOCTYPE html>
<html>
  <head>
    <title>Repo</title>
    <!-- 修正后的CSS引入方式 -->
    <link rel="stylesheet" href="style.css" type="text/css"> 
  </head>

  <body style="margin: 0;">
    <img src="MazeBackground.png" alt="" srcset="">
    <iframe src="style.css" frameborder="0"></iframe>
  </body>
</html>

2. Express静态资源中间件注册位置错误 #

你把app.use(express.static('public'))放在了根路径的get回调内，导致静态资源中间件仅在第一次访问/路径时才被注册，后续请求（比如加载style.css）可能无法被正确拦截处理。

修复Node.js代码：
将静态资源中间件移到所有路由之前，确保全局生效：

const express = require("express");
const path = require("path");
const app = express();

// 提前注册静态资源中间件，所有请求优先走静态资源匹配
app.use(express.static('public'));

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "./public/index.html"));
});

app.listen(3000, () => console.log("server is listening on port 3000."));

额外说明 #

无需手动设置CSS的MIME类型，express.static中间件会自动根据文件后缀正确配置（比如.css文件自动设为text/css），手动配置反而容易引发问题。

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