如何将Node.js/Express后端数据传递至前端JavaScript？

你的问题出在静态JS文件无法被EJS模板引擎解析——frontend.js是作为静态资源被浏览器请求的，Express只会处理.ejs页面里的模板语法（<%= %>这类标签），不会去解析独立的JS文件里的模板代码，所以浏览器拿到的是原封不动的var data = <%=data%>;，自然无法正确获取数据。

下面给你三种可行的解决方案，你可以根据场景选择：

方案一：在EJS页面中嵌入脚本传递全局变量 #

这是最简单直接的方式，先在home.ejs里把后端数据转成JSON字符串，挂载到全局变量，再引入前端脚本：

<!-- home.ejs 代码 -->
<!DOCTYPE html>
<html>
<head>
  <title>Home Page</title>
</head>
<body>
  <!-- 先在页面内的脚本中定义全局变量 -->
  <script>
    // 用JSON.stringify把后端对象转成合法的JS对象字面量
    const backendData = <%= JSON.stringify(data) %>;
  </script>
  <!-- 再引入你的前端脚本 -->
  <script src="frontend.js"></script>
</body>
</html>

然后在frontend.js里就可以直接使用这个全局变量了：

// frontend.js 代码
console.log('后端传递的数据:', backendData);
// 在这里处理你的数据逻辑

⚠️ 注意：一定要用JSON.stringify，如果直接写<%= data %>，当data是对象时会输出[object Object]，完全无法使用。

方案二：通过HTML元素的data属性传递数据 #

如果不想污染全局变量，可以把数据存在页面元素的data-*属性里，再用前端JS读取：

<!-- home.ejs 代码 -->
<div id="app-container" data-backend-data="<%= JSON.stringify(data) %>"></div>
<script src="frontend.js"></script>

然后在frontend.js中读取并解析：

// frontend.js 代码
const container = document.getElementById('app-container');
// 从dataset中读取属性，再转成JS对象
const backendData = JSON.parse(container.dataset.backendData);
console.log(backendData);

方案三：前端通过API接口异步获取数据 #

如果你的数据需要动态更新，或者不想在页面渲染时直接注入数据，可以让前端发起AJAX请求获取：
首先在Express后端新增一个接口：

// Express后端代码
app.get('/api/get-data', (req, res) => {
  // 直接返回JSON格式的数据
  res.json(data);
});

然后在frontend.js中用fetch请求这个接口：

// frontend.js 代码
fetch('/api/get-data')
  .then(response => {
    if (!response.ok) {
      throw new Error('请求失败');
    }
    return response.json();
  })
  .then(backendData => {
    console.log('从API获取的数据:', backendData);
    // 处理数据逻辑
  })
  .catch(err => {
    console.error('获取数据出错:', err);
  });

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