URL中的路径问题(绝对和相对)

Question

我有一个带有"Nodejs"(使用"Express"框架(的本地网站。我使用express route来显示目录中的每个文件，如果请求的文件不在我要渲染的目录中CCD_ 1。但我意识到奇怪的事情发生了。问题来了：

当用户输入类似内容时："http://localhost:3000/swgw"最后一个中间件执行并"notfound.html"呈现属性。(使用css样式(
当用户输入URL时，如下模式："http://localhost:3000/products/*"问题是这次not-found.html渲染没有css样式。(注意：*不是1-6(

• 公共
  • 产品
    • 产品-1.html
    • 产品-2.html
    • 产品-3.html
    • 产品-4.html
    • product-5.html
    • 产品-6.html
  • 风格
    • not-found.css
  • not-found.html

• server.js
  
  strong>server.js
  

  ```
  ...
  app.use(express.static(path.join(__dirname, 'public')));
  app.get("/products/:id", (req, res, next) => {
  // since I have six product with id from 1 to 6. 
  if (req.params.id <= 6 && req.params.id >= 1) {
  res.setHeader('content-type', 'text/html');
  return res.sendFile(path.resolve(`public/products/product-${req.params.id}.html`));
  }  
  else {
  next();
  }
  });
  app.get('*', function(req, res){
  res.status(404);
  res.sendFile(path.resolve('public/not-found.html'));
  });
  ```
  

  
  
  strong>未找到.html ... <link rel="stylesheet" href="./style/not-found.css" > ...

Answer 1

更改为

<link rel="stylesheet" href="/style/not-found.css" >. 

您需要一个相对于express.static()作为其根目录的公共目录的路径。

但是，如果href="./style/notfound.css"，请你解释一下为什么当用户输入："localhost:3000/5"时它可以正确工作，但不能在"localhost:300/products/5"上工作(我的意思是成功加载css(

如果HTML页面的链接不是以http://或/开头，则它被视为路径相关链接，浏览器将采用页面的路径，并将其与链接中的URL组合，形成完整的URL，然后再将其发送到服务器。所以，当你有这个：

href="./style/not-found.css"

页面URL是这样的：

http://localhost:3000/products/something

浏览器最终将请求：

http://localhost:3000/products/style/not-found.css

而且，您的服务器不知道该怎么办。另一方面，当您将<style>标记更改为以下内容时：

href="/style/not-found.css"

然后，你的URL以/开头，所以浏览器唯一会添加到其中的就是域，浏览器会请求：

http://localhost:3000/style/not-found.css

这将起作用。

所以，当你使用这样的路径时：

http://localhost:3000/5

然后，它的路径只是/，所以当你将not-found.html0和./style/not-found.css组合在一起时，浏览器最终会请求

http://localhost:3000/stye/not-found.css 

它会起作用，因为该路径是根路径。因此，它不适用于非顶级页面。这就是为什么静态资源URL应该始终是路径绝对的(以/开头(，这样它们就不依赖于托管页面的路径。