如何通过Fetch获取Node.js路由传递的页面变量？

你当前的问题核心是：用res.render传递的变量是给模板引擎渲染HTML用的，前端fetch("/")拿到的是渲染后的完整HTML字符串，并非JSON格式数据，所以data.x会返回undefined。以下是几种可行的解决办法：

方法1：模板引擎直接注入全局变量 #

在你的index模板（如EJS、Pug等）中，直接把后端变量输出到<script>标签里，让前端JS可直接访问：

<!-- 以EJS模板为例 -->
<script>
  // 通过模板引擎将后端变量转为前端全局变量
  const backendX = <%= x %>;
  console.log(backendX); // 直接输出123
</script>

这种方式无需额外发请求，页面加载时就能获取变量，是最直接的方案。

方法2：新增API接口返回JSON数据 #

单独编写一个接口专门返回所需变量，前端请求该接口获取JSON格式数据：

// Node.js 新增路由
app.get("/api/get-variable", function(req, res) {
  res.json({ x: 123 }); // 返回JSON格式的变量数据
});

前端修改fetch请求逻辑：

fetch("/api/get-variable")
  .then(response => response.json()) // 解析JSON而非文本
  .then(data => {
    console.log(data.x); // 输出123
  });

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

在模板里把变量存入元素的data属性，前端通过DOM读取：

<!-- 以EJS模板为例 -->
<div id="data-container" data-x="<%= x %>"></div>

<script>
  // 从DOM元素的data属性中读取变量
  const x = document.getElementById("data-container").dataset.x;
  console.log(x); // 输出123（注意是字符串，需转数字可使用Number(x)）
</script>

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