[英]Path problem in URL ( absolute and relative )
I have a local website with "Nodejs" (using "Express" framework).我有一个带有“Nodejs”的本地网站(使用“Express”框架)。 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
.我正在使用快速路由来显示我目录中的每个文件,如果请求的文件不在我的目录中,我想呈现
not-found.html
。 But I realized a weird things happen.但我意识到奇怪的事情发生了。 Here it's the issue:
这是问题:
when user enter something like this: " http://localhost:3000/swgw " the last middleware execute and "not-found.html" render property.当用户输入如下内容时:“ http://localhost:3000/swgw ”最后一个中间件执行和“not-found.html”呈现属性。 (with css style)
(带有css样式)
when user enter URL like following pattern: " http://localhost:3000/products/ *" the problem is this time not-found.html
render without css style.当用户输入类似以下模式的 URL 时:“ http://localhost:3000/products/ *” 问题是这次
not-found.html
渲染没有 css 样式。 ( Note: * isn't 1-6) (注意: * 不是 1-6)
server.js服务器.js
server.js服务器.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" > ...
not-found.html
... <link rel="stylesheet" href="./style/not-found.css" > ...
Change to改成
<link rel="stylesheet" href="/style/not-found.css" >.
You want a path that is relative to the public directory that express.static()
has as its root.您需要一个相对于
express.static()
作为其根的公共目录的路径。
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)
但是请您解释一下 href="./style/not-found.css" 为什么当用户输入时它可以正常工作:“localhost:3000/5”但不能在“localhost:3000/products/5”上工作(我的意思是成功加载css)
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.当您的 HTML 页面的链接不是以
http://
或/
开头时,它被认为是一个相对路径的链接,浏览器将获取页面的路径并将其与链接中的 URL 结合起来形成一个完整的将其发送到服务器之前的 URL。 So, when you have this:所以,当你有这个时:
href="./style/not-found.css"
and the page URL is this:页面 URL 是这样的:
http://localhost:3000/products/something
The browser will end up requesting:浏览器将最终请求:
http://localhost:3000/products/style/not-found.css
And, your server won't know what to do with that.而且,您的服务器将不知道如何处理它。 On the other hand, when you change the
<style>
tag to this:另一方面,当您将
<style>
标签更改为:
href="/style/not-found.css"
Then, your URL starts with a /
so the only thing the browser will add to it is the domain and the browser will request:然后,您的 URL 以
/
开头,因此浏览器将添加到它的唯一内容是域,浏览器将请求:
http://localhost:3000/style/not-found.css
which will work.这将工作。
So, when you use a path like:因此,当您使用以下路径时:
http://localhost:3000/5 http://本地主机:3000/5
Then, the path for that is just /
so when you combine /
with ./style/not-found.css
, the browser will end up requesting然后,路径就是
/
所以当你将/
与./style/not-found.css
结合时,浏览器最终会请求
http://localhost:3000/stye/not-found.css
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 应该始终是绝对路径(以
/
开头),以便它们不依赖于托管页面的路径。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.