Javascript URL中的路径问题（绝对和相对）

我有一个带有“Nodejs”（使用“Express”框架）的本地网站。我正在使用express route显示目录中的每个文件，如果请求的文件不在我的目录中，我希望呈现

未找到。html

。 但我意识到奇怪的事情发生了。 问题是：

当用户输入如下内容时：“最后一个中间件执行”和“未找到.html”呈现属性。（使用css样式）
当用户像下面的模式一样输入URL:“*”时，问题是这次

notfound.html

render而不使用css样式。（注意：*不是1-6）

• 公开的
  • 产品
    • product-1.html
    • product-2.html
    • product-3.html
    • product-4.html
    • product-5.html
    • product-6.html
  • 风格
    • not-found.css
  • not-found.html
• server.js
  
  
  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'));
  });
  ```
  

  ```
  ...
  app.use（express.static（path.join（uu dirname，'public'））；
  app.get（“/products/：id”，（req，res，next）=>{
  //因为我有六个产品，id从1到6。
  如果（req.params.id=1）{
  res.setHeader（'content-type'，'text/html'）；
  返回res.sendFile（path.resolve（`public/products/product-${req.params.id}.html`））；
  }  
  否则{
  next（）；
  }
  });
  app.get（'*'，函数（req，res）{
  物质状态（404）；
  res.sendFile（path.resolve（'public/notfound.html'）；
  });
  ```
  

  
  
  
  未找到。html

  
  ...
  ...
  

更改为

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

页面URL如下所示：

http://localhost:3000/products/something

浏览器最终将请求：

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

而且，您的服务器将不知道如何处理它。另一方面，当您将

标记更改为以下内容时：

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

然后，您的URL以

/

开头，因此浏览器将添加到其中的唯一内容是域，并且浏览器将请求：

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

这会管用的

因此，当您使用以下路径时：

然后，它的路径就是

/

，因此当您将

/

与

/style/not found.css组合在一起时，浏览器最终会请求

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

它将起作用，因为路径是根路径。因此，它不适用于不在顶层的页面。这就是为什么静态资源URL应该始终是路径绝对的（以
/
开头），这样它们就不依赖于宿主页面的路径。
更改为
。您需要一个相对于
public
目录的路径，该目录的根是
express.static（）
。谢谢，我的问题解决了。但是，请您解释一下，如果用户输入：“但不在”时，为什么它可以正常工作（我的意思是成功加载css），请参阅我在下面的答案中的解释。您似乎只提供静态文件，而完全放弃您的serveer代码并简单地使用它会更简单[http服务器]（使用）谢谢。我完全理解。这是关于为nodeJS服务器设计路由的有用文章或课程吗？（有效方法）以及为什么一些代码使用不同的静态文件路径。（可能是因为例如在route/产品中）“其中的文件具有不同的css文件？或图像资源？）@omid-可以将所有相对URL用于嵌套目录，但实际上，这可能会带来更多麻烦，因为它是值得的。您仍然可以在嵌套页面上轻松地使用绝对URL和使用不同的资源，而不会遇到您遇到的问题。
http://localhost:3000/stye/not-found.css