Javascript 如何"；“绝对化”；href/src值与服务器呈现？

假设我有一个元素，它的

href

/

src

是这样的根路径：

href=“/abc/def”

。 假设我还编写了一个如下所示的函数：

img(src=`http://example.com:80/img/${imgSrc}`)

函数绝对化href（href）{
const URLBase=新URL（`http://${process.env.HOST}:${process.env.PORT}/`）；
返回新的URL（href，URLBase）；
}

并将结果作为属性发送到模板

假设

主机

和

端口

事先已知，它就可以工作了。但我更希望有一个与环境无关的解决方案。根据

URL（）

构造函数的

base

选项，构造函数看起来像

origin

，因此问题是有没有一种简单的方法可以将其值从服务器实例中提取出来，并将其作为

base

值插入构造函数

编辑：给了我一些想法：

函数返回绝对HREFServer（请求）{
const协议=request.protocol；
const fullHostname=request.headers.host；
返回绝对URL；
函数绝对URL（href）{
const URLBase=新URL（`${protocol}://${fullHostname}`）；
const newURL=newURL（href，URLBase）；
返回newURL；
}
}

---

因此，第一个函数的结果可以指定为传递给模板的对象的方法，然后在那里的相对链接上调用。但是，它会根据链接的不同而有所不同，这就把问题带回了正题——相同内容的不同HREF/SRC。

为什么需要绝对路径？你不需要它来显示你的图像。设置公用路由以服务于静态文件并使用相对路径：

img(src=`/img/${imgName}`)

您不需要像这样设置路径：

img(src=`http://example.com:80/img/${imgSrc}`)

但您可以将

/

放在相对路径之前，并自动使用正确的主机和端口：

img(src=`/img/img1.jpg`)

---

阅读之后，我想提出一个解决方案，在不依赖开发环境的情况下，将绝对URL插入

href

/

src

值中。当然，服务器实例将“origin”值存储在某个地方，否则它无法处理请求/响应。@BillerBuilder如果确实需要使用绝对url，可以使用

req.hostname

获取主机名，使用

req.headers.host

获取带有端口的主机名，要获取使用的协议，请使用

req.protocol

。更多信息。如果这是你想要的，请让我知道如何编辑我的答案。这似乎很有效。很明显，它只针对服务器，因为它需要

请求

，但是如何在客户端进行绝对链接呢？仅仅依赖

请求

主体是很酷的，但是结果将严重依赖于请求参数，并将根据链接返回不同的绝对值，也就是说，不同的协议或主机名，这就无法使它们成为绝对的。@BillerBuilder要在前端签出

窗口中获取主机名。location

，它有一系列有用的属性可以帮助您。例如

window.location.origin

为您提供

https://stackoverflow.com