如何在Express服务器与浏览器端JS之间共享路由查询参数

方法1：通过模板引擎注入全局变量 #

如果你的项目使用模板引擎（比如EJS、Handlebars），可以直接把查询参数传递给模板，再在页面脚本中使用：

Express路由代码 #

app.get('/some-route', (req, res) => {
  const { environment } = req.query;
  // 将参数传入模板
  res.render("index.ejs", { environment });
});

页面脚本（index.ejs中） #

<script>
// 直接使用模板注入的变量
const environment = '<%= environment %>';

// 执行后续验证操作
if (environment === 'production') {
  console.log("生产环境验证逻辑执行");
} else if (environment === 'development') {
  console.log("开发环境验证逻辑执行");
}
</script>

注：不同模板引擎语法略有差异，比如Handlebars用{{environment}}替代<%= environment %>

方法2：前端直接解析URL查询参数 #

不需要后端额外传递，前端脚本直接从当前页面URL中提取参数，适合静态HTML场景：

<script>
// 解析URL中的查询参数
const urlParams = new URLSearchParams(window.location.search);
const environment = urlParams.get('environment');

// 验证参数并执行逻辑
if (environment) {
  console.log(`当前环境：${environment}`);
  // 你的验证代码写在这里
} else {
  console.log("未获取到environment参数");
}
</script>

方法3：通过HTML的data属性传递 #

后端将参数绑定到DOM元素的data属性上，前端脚本读取该属性值：

Express路由代码 #

app.get('/some-route', (req, res) => {
  const { environment } = req.query;
  res.render("index.ejs", { environment });
});

页面代码（index.ejs中） #

<body data-environment="<%= environment %>">
  <script>
    // 读取data属性值
    const environment = document.body.dataset.environment;
    
    // 执行验证操作
    if (environment === 'test') {
      console.log("测试环境验证通过");
    }
  </script>
</body>

内容的提问来源于stack exchange，提问作者Bikash Pattnayak