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"` 

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