如何通过服务器渲染“绝对化”href/src 值？答案

【问题标题】：How to "absolutize" href/src values with server rendering?如何通过服务器渲染“绝对化”href/src 值？
【发布时间】：2020-10-27 18:53:44
【问题描述】：

假设我有一个元素，其 href/src 是这样的根路径：href="/abc/def"。假设我还写了一个如下所示的函数：

function absolutizeHREF(href) {
  const URLBase = new URL(`http://${process.env.HOST}:${process.env.PORT}/`);

  return new URL(href, URLBase);
}

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

假设 HOST 和 PORT 是事先已知的，它有点工作。但我宁愿有与环境无关的解决方案。根据docs，URL() 构造函数的base 选项看起来像origin，所以问题是有一种简单的方法可以将其值从服务器实例中提取出来，然后作为base 值插入构造函数？

编辑：This comment 给了我一些想法：

function returnAbsoluteHREFServer(request) {
  const protocol = request.protocol;
  const fullHostname = request.headers.host;

  return absoluteURL;

  function absoluteURL(href) {
    const URLBase = new URL(`${protocol}://${fullHostname}`);
    const newURL = new URL(href, URLBase);

    return newURL;
    
  }
}

因此，第一个函数的结果可以作为传递给模板的对象的方法分配，然后在那里的相关链接上被调用。但是，它会因链接而异，这将问题带回到第一个问题 - 相同内容的不同 hrefs/srcs。

【问题讨论】：

标签： javascript node.js express pug

【解决方案1】：

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

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

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

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

但您可以将/ 放在相对路径之前，将自动使用正确的主机和端口：

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

【讨论】：

在阅读了this post 之后，我想提出一种解决方案，将绝对 URL 插入href/src 值而不依赖于开发环境。当然，服务器实例将“原始”值存储在某处，否则它无法处理请求/响应。
@BillerBuilder 如果确实需要使用绝对url，可以使用req.hostname获取主机名，使用req.headers.host获取带端口的主机名，使用req.protocol获取使用的协议。更多信息docs。如果这是您要查找的内容，请告诉我以编辑我的答案。
这似乎有效。显然它只适用于服务器，因为它需要request，但是你如何处理客户端的绝对链接呢？
它仅依赖于request 主体非常酷，但结果将在很大程度上取决于请求参数，并且会根据链接返回不同的绝对值，即不同的协议或主机名，这不符合要点让他们绝对化。
@BillerBuilder 要在前端结帐window.location 中获取主机名，它有很多有用的属性可以帮助您。例如window.location.origin 给你https://stackoverflow.com