css - 用于提供静态文件的中间件不适用于动态路由

Question

我有一个简单的 Node/Express 服务器，当我的路由为“/:world”时，它工作得很好。已正确找到 CSS 文件。

但是当我将路由更改为“/:world/:page”时，它找不到 CSS 文件。

这是为什么呢？听起来很简单，但我有点新，有什么解决方案吗？

var express = require('express');
var bodyParser = require('body-parser');
var path = require('path');
var request = require('request-promise');
const port = process.env.PORT || 3000;

var app = express();

app.use(bodyParser.json());
app.use(express.static(__dirname + '/views'));

app.set('view engine', 'ejs');

app.get('/:world/:page', async (req, res) => {
 var world = req.params.world;
 var page = req.params.page;

 var worldInfo = await getWorldInfo(world);
 if (!worldInfo.world.world_information.players_online) {
    res.render('error.ejs');
 }else{

     var playersList = await getPlayersList(worldInfo, page);

     res.render('index.ejs', {
         playersList: playersList,
         world:world
     });
  }  


});

app.listen(port, () => {
console.log('watcher running');
});

Answer 1

这听起来像是一个相对路径问题。这是一个例子。

在您的初始路线设置中，使用 /:world ，您将拥有类似 example.com/earth 的 URL ，带有 <link />标签如 <link href="myCSS.css" /> 。在此设置中 <link />标签指向example.com/myCSS.css 。

在第二条路线设置中，使用 /:world/:page ，您将拥有类似 example.com/earth/about 的 URL ，带有 <link />标签如 <link href="myCSS.css" /> 。在此设置中 <link />标签指向example.com/earth/myCSS.css 。

这是因为<link />中的文件路径标签是相对的。这意味着它相对于当前页面的路径。

要解决此问题，您需要更新 <link />使用绝对路径。这可以通过两种方式完成:

1. 使用绝对 href喜欢 http://example.com/myCSS.css
2. 使用绝对 href喜欢 /myCSS.css - 领先 /

这两种方法都会导致浏览器从根域开始查找 CSS 文件。也就是说，浏览器现在将在 example.com/myCSS.css 处查找 CSS 文件。 。或者，如果我们将其更改为 <link href="/styles/myCSS.css" />浏览器会在 example.com/styles/myCSS.css 处查找 CSS 文件。 。