Question

我有一个简单的Node / Express服务器，当我将路由作为＆＃34; /：world＆＃34;时工作正常。 CSS文件被正确找到。

但是当我将路线更改为＆＃34; /：world /：page＆＃34;它没有找到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之类的网址，其<link />标记为<link href="myCSS.css" />。在此设置中，<link />标记指向example.com/myCSS.css。

在第二次路线设置中，使用/:world/:page，您会看到example.com/earth/about这样的网址，其<link />标记为<link href="myCSS.css" />。在此设置中，<link />标记指向example.com/earth/myCSS.css。

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

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

使用绝对href，例如http://example.com/myCSS.css
使用绝对href，例如/myCSS.css - 使用前导/

这些方法中的任何一个都会导致浏览器从根域开始查找CSS文件。也就是说，浏览器现在将在example.com/myCSS.css处查找CSS文件。另外，如果我们将其更改为<link href="/styles/myCSS.css" />，则浏览器会在example.com/styles/myCSS.css查找CSS文件。

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

1 个答案: