express.static() 不从不是“/”的路由器路径中的公共文件夹中提供文件

Question

Express.static 配置：

app.use(express.static(__dirname + "/public"));

文件结构：

--public
  --assets
  --js
    --[js scripts]
  --stylesheets
    --[css files]

路线：

const shopRoutes = require('./routes/shopRoutes')
app.use('/', shopRoutes)

const itemApiRoutes = require('./routes/itemApiRoutes')
app.use('/api/shopitems', itemApiRoutes)

const logSignRoutes = require('./routes/logSignRoutes')
app.use('/account', logSignRoutes)

问题是“localhost:3000/”（shopRoutes）根路径中的所有 ejs 文件都像这样调用以下 css 文件并且工作得很好：

<link rel="stylesheet" type="text/css" href="stylesheets/header.css">

使用 Express Router，路径 "localhost:3000/account/login" 上的 ejs 文件使用完全相同的语法调用相同的 css 文件，但得到错误：

Cannot GET /account/login/stylesheets/header.css/

我是不是不明白 express.static 如何提供静态文件，或者我做错了什么？

Answer 1

如果您指定一个相对 URL，例如：

href="stylesheets/header.css" 

然后浏览器将您所在网页的路径添加到该路径中，并从您的服务器请求该组合路径。 除非您的网页位于网站的顶层并且因此没有路径，否则它将无法正常工作。 我想强调的是，这是浏览器在做这件事，而不是 Express。 因此，如果您在具有此 URL 的网页中：

http://localhost:3000/account/login

而且，浏览器会看到：

<link rel="stylesheet" type="text/css" href="stylesheets/header.css">

它最终会结合网页的路径

/account/login

使用<link>标记中的相对 URL，正如您发现的那样，它将请求：

/account/login/stylesheets/header.css

当express.static()看到该 URL 时，它将与您的

__dirname + "/public"

目录层次结构，所以它不会被找到。

---

相反，您要指定一个前导斜杠：

<link rel="stylesheet" type="text/css" href="/stylesheets/header.css">

这告诉浏览器不要向 URL 添加任何路径，它会向您的服务器发送请求：

/stylesheets/header.css

当express.static()收到该请求时，它会将其与

__dirname + "/public"

并且最终会寻找一个文件

__dirname + "/public" + "/stylesheets/header.css"` 

这将在您的公共目录层次结构中找到并且将起作用。