通过 Express 在提供的 HTML 页面中设置动态 URL答案

【问题标题】：Set Dynamic URL in served HTML page by Express通过 Express 在提供的 HTML 页面中设置动态 URL
【发布时间】：2021-07-23 18:26:00
【问题描述】：

我在 docker 容器中运行 Express API，我的一条路由为用户提供 HTML 页面。

app.get('/trilateration/', function(req,res){
    res.sendFile(path.join( __dirname,'trilateration','/Trilateration.html'));

});

这个页面有它的javascript代码，这个代码调用express API来获取数据。我在 JS 中设置 express server api，如下所示：

var serverHost='http://rtlsdatabase:3014'
var urlpos =  serverHost + "/pos/";
var urlrpi = serverHost + "/rpi/";
var urltooling = serverHost + "/tooling/";
var urlBlueprint = serverHost + "/blueprint/";
var urlDimensions = serverHost + "/dimensions/"

我使用 .env 文件将变量传递给 docker 容器并与 Express 一起使用，但 HTML 页面和 javascript 代码无法使用它。

如何将服务器 URL 动态传递给这个“serverHost”变量？我想在 .env 文件中设置它，甚至以其他方式获取它，因为 url 主机是为该页面提供服务的同一台服务器。

感谢任何帮助。

【问题讨论】：

javascript是如何添加到页面的？您是否使用脚本标签添加它？ @alosbh
@fortunee 是的。

标签： javascript html docker express

【解决方案1】：

您无法从浏览器/客户端环境访问服务器环境变量。

实现你的目标：

浏览器/客户端必须向服务器发出 GET 请求才能获得该值。 HTML 中的 javascript 代码可以使用fetch 发出请求，如下所示的示例代码：

fetch('http://url-to-express-server/data')
  .then(res => res.json())
  // the data here is the value sent from the server
  .then((data => console.log(data))

快速服务器必须公开一个端点，该端点从其环境变量返回数据片段。下面的示例代码将端点定义为/data，但它可以是任何描述性内容。

app.get('/data', (req, res) => res.json(process.env.serverHost));

注意：确保您的 env 文件中有该环境变量，并且您使用 dotenv 包来读取环境变量。

不要犹豫，问任何问题

【讨论】：