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

Question

Express.static config:

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

File Structure:

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

Routes:

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)

The issue is that all ejs files in the root path at "localhost:3000/" (shopRoutes) calls for the following css file like so and works perfectly fine:

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

Using Express Router, the ejs file at the path "localhost:3000/account/login" calls for the same css file with the exact same syntax but gets the error:

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

Am I not understanding how express.static serves static files or am I doing something incorrectly?

Answer 1

If you specify a relative URL such as:

href="stylesheets/header.css" 

then the browser adds the path of the web page you're in to that and requests that combined path from your server. Unless your web page is at the top level of your web site and thus has no path, it will not work properly. I want to emphasize, this is the browser doing this, not Express. So, if you're in a web page with this URL:

http://localhost:3000/account/login

And, the browser sees:

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

It will end up combine the path of the web page

/account/login

with the relative URL you in <link> tag and as you've found out, it will request:

/account/login/stylesheets/header.css

When, express.static() sees that URL, that will not match anything in your

__dirname + "/public"

directory hierarchy so it will not be found.

---

Instead, you want to specify a leading slash:

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

That tells the browser not add any path to the URL and it will send a request to your server for:

/stylesheets/header.css

When express.static() gets that request, it combines that with

__dirname + "/public"

and will end up looking for a file

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

which will be found in your public directory hierarchy and will work.