Node.js中API数据无法在EJS文件显示的解决方法求助

别着急，我帮你拆解下问题——大概率是跨域限制或者数据传递环节出了问题，给你两种可行的解决方案，你可以根据需求选择：

这种方式让Node.js后端去请求第三方API（避开浏览器同源策略），再把数据直接传给EJS模板渲染，不需要前端AJAX。

步骤1：安装必要依赖 #

先确保你装了请求API的工具（比如axios），在项目根目录运行：

npm install express ejs axios

步骤2：修改你的index.js #

补全模板引擎配置和API请求逻辑：

var express = require('express');
var app = express();
var axios = require('axios');

app.set('port', (process.env.PORT || 5000));
app.use(express.static(__dirname + '/public'));
app.set('view engine', 'ejs'); // 启用EJS模板引擎
app.set('views', __dirname + '/views'); // 指定模板文件目录（默认是根目录下的views文件夹）

// 首页路由：后端请求API后传数据给EJS
app.get('/', async (req, res) => {
  try {
    // 替换成你要请求的实际API地址
    const apiResponse = await axios.get('https://api.example.com/data');
    const apiData = apiResponse.data;
    
    // 把数据传给EJS模板
    res.render('index', { data: apiData });
  } catch (error) {
    console.error('请求API失败:', error.message);
    // 传递错误信息给模板，方便前端提示
    res.render('index', { data: null, error: '无法获取数据，请稍后重试' });
  }
});

app.listen(app.get('port'), () => {
  console.log(`Server running on port ${app.get('port')}`);
});

步骤3：编写EJS模板（views/index.ejs） #

在模板里直接渲染后端传来的数据：

<!DOCTYPE html>
<html>
<head>
  <title>API数据展示</title>
</head>
<body>
  <h1>从API获取的数据</h1>
  
  <% if (error) { %>
    <p style="color: red;"><%= error %></p>
  <% } else if (data) { %>
    <!-- 这里根据你的API数据结构修改，比如假设data是数组 -->
    <ul>
      <% data.forEach(item => { %>
        <li><%= item.title || item.name %></li> <!-- 替换成实际字段名 -->
      <% }) %>
    </ul>
  <% } %>
</body>
</html>

如果需要页面加载后再动态获取数据，可以让前端AJAX请求自己的后端接口，由后端转发请求到第三方API（避免跨域）。

步骤1：后端添加代理接口（在index.js里加） #

// 新增一个接口，专门用来转发API请求
app.get('/api/get-data', async (req, res) => {
  try {
    const apiResponse = await axios.get('https://api.example.com/data');
    res.json(apiResponse.data); // 把API数据以JSON格式返回给前端
  } catch (error) {
    res.status(500).json({ error: '获取数据失败' });
  }
});

步骤2：前端EJS里写AJAX逻辑（views/index.ejs） #

用原生fetch或者axios请求后端接口：

<!DOCTYPE html>
<html>
<head>
  <title>AJAX获取API数据</title>
</head>
<body>
  <h1>动态加载API数据</h1>
  <div id="data-container"></div>

  <script>
    // 用原生fetch请求后端代理接口
    fetch('/api/get-data')
      .then(res => res.json())
      .then(data => {
        const container = document.getElementById('data-container');
        // 根据数据结构生成HTML
        let html = '<ul>';
        data.forEach(item => {
          html += `<li>${item.title || item.name}</li>`;
        });
        html += '</ul>';
        container.innerHTML = html;
      })
      .catch(err => {
        document.getElementById('data-container').innerHTML = '<p style="color: red;">加载数据失败</p>';
        console.error(err);
      });
  </script>
</body>
</html>

1. 先在后端控制台打印apiData，确认后端能正常拿到API数据（如果后端都拿不到，那就是API地址、权限或者网络问题）
2. 如果API需要请求头（比如Authorization令牌），要在后端的axios请求里加上：

   const apiResponse = await axios.get('你的API地址', {
     headers: {
       'Authorization': 'Bearer 你的令牌'
     }
   });
   

3. 确保EJS模板文件放在views目录下，路径和app.set('views', ...)配置一致
4. 检查前端AJAX的请求地址是否正确（比如/api/get-data是否和后端路由匹配）

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