URL中的路径问题(绝对和相对) [英] Path problem in URL ( absolute and relative )

问题描述

我有一个本地网站，带有"Nodejs"(使用"Express"框架).我正在使用快速路由来显示目录中的每个文件，如果请求的文件不在目录中，我想渲染 not-found.html .但是我意识到发生了一件奇怪的事情.这就是问题所在:

I have a local website with "Nodejs" (using "Express" framework). I'm using express route for showing each file in my directory and if the file that requested isn't in my directory I want to render not-found.html. But I realized a weird things happen. Here it's the issue:

当用户输入如下内容时:" http://localhost:3000/swgw "最后一个中间件执行和"not-found.html"渲染属性.(具有CSS样式)
当用户输入如下格式的URL时:" http://localhost:3000/products/ *"问题这次是没有CSS样式的 not-found.html 渲染.(注意: *不是1-6)

when user enter something like this: "http://localhost:3000/swgw" the last middleware execute and "not-found.html" render property. (with css style)
when user enter URL like following pattern: "http://localhost:3000/products/*" the problem is this time not-found.html render without css style. (Note: * isn't 1-6)

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

    server.js
    
    
    server.js
    

    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'));
    });
    ```
    

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

    推荐答案

    更改为

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

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

    You want a path that is relative to the public directory that express.static() has as its root.

    但是，如果您输入href ="./style/not-found.css"，为什么当用户输入:"localhost:3000/5"却不能在"localhost:3000/products/5英寸(我的意思是成功加载CSS)

    But may u please explain me in case href="./style/not-found.css" why it's works correctly when user enter : "localhost:3000/5" but not work on "localhost:3000/products/5" (I mean loading css successfully)

    当您的HTML页面的链接不是以 http://或/开头时，则被视为相对路径的链接，浏览器将采用页面的路径，并将其与链接中的URL组合在一起以构成完整的URL，然后再将其发送到服务器.因此，当您拥有此功能时:

    When the link your HTML page does not start with http:// or with /, then it is considered a path-relative link and the browser will take the path of the page and combine it with the URL in the link to make a full URL before sending it to the server. So, when you have this:

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

    页面的URL是这样的:

    and the page URL is this:

    http://localhost:3000/products/something
    

    浏览器最终将请求:

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

    而且，您的服务器不知道该怎么办.另一方面，将< style> 标记更改为此:

    And, your server won't know what to do with that. On the other hand, when you change the <style> tag to this:

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

    然后，您的URL以/开头，因此浏览器将添加到域中的唯一内容，浏览器将请求:

    Then, your URL starts with a / so the only thing the browser will add to it is the domain and the browser will request:

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

    这将起作用.

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

    So, when you use a path like:

    http://localhost:3000/5

    然后，该路径仅是/，因此当您将/与 ./style/not-found.css 组合时，浏览器最终将请求

    Then, the path for that is just / so when you combine / with ./style/not-found.css, the browser will end up requesting

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

    ，它将起作用，因为该路径是根路径.因此，它不适用于不在顶层的页面.这就是为什么您的静态资源URL应始终为绝对路径(以/开头)，以便它们不依赖于托管页面的路径.

    and it will work because the path was a root path. So, it doesn't work for pages that are not at the top level. This is why your static resource URLs should always be path absolute (start with a /) so they don't depend upon the path of the hosting page.

    这篇关于URL中的路径问题(绝对和相对)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！