在服务器端渲染上dynamic修改<base>标记

我正在寻找如何获得一个HTML页面的基础URL,以便来自浏览器的相对URL请求使用该基础。

下面是答案定义网站根文件夹中的文件夹中的HTML根目录

从服务器呈现HTML时 – 是否有可靠的方法将一个<base>元素添加到HTML中?

该HTML文件是自动生成的,我不想手动添加<base>标签到文件,如果我能避免它。 当页面被渲染时,以某种方式dynamic添加它将会很好。

所以这里是HTML:

 <head> <title>Code coverage report for All files</title> <meta charset="utf-8" /> <link rel="stylesheet" href="prettify.css" /> <link rel="stylesheet" href="base.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type='text/css'> .coverage-summary .sorter { background-image: url(sort-arrow-sprite.png); } </style> </head> 

我想在使用服务器进行渲染时添加一个基本标记,所以它看起来像:

 <head> <title>Code coverage report for All files</title> <meta charset="utf-8" /> <base href="http://localhost:3050/coverage/lcov-report/cdt-now/index.html"> // <<<< <link rel="stylesheet" href="prettify.css" /> <link rel="stylesheet" href="base.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type='text/css'> .coverage-summary .sorter { background-image: url(sort-arrow-sprite.png); } </style> </head> 

我想这个问题是index.html文件不在我的项目的根目录:

在这里输入图像描述

但是,您可以使用上面的<head><link>标记来看到index.html文件生成相对path请求。

我目前正在像这样渲染页面:

 router.get('/', ac.allow('Admin'), function (req, res, next) { let html = path.resolve(__dirname + '/../coverage/lcov-report/cdt-now/index.html'); res.setHeader('content-type', 'text/html'); fs.createReadStream(html).pipe(res); }); 

       

网上收集的解决方案 "在服务器端渲染上dynamic修改<base>标记"

所以使用我的当前代码将响应传递给浏览器的方法是:

  const replacestream = require('replacestream'); router.get('/', ac.allow('Admin'), function (req, res, next) { let html, val = 'coverage/lcov-report/cdt-now/index.html'; try { html = path.resolve(__dirname + `/../${val}`); fs.existsSync(html) } catch (err) { return next(err); } res.setHeader('content-type', 'text/html'); let replacement = `</title><base href="http://localhost:3050/${val}">`; fs.createReadStream(html).pipe(replacestream('</title>', replacement)).pipe(res); }); 

这是基本的想法。