本文讲解如何通过 Express 提供 API 接口，配合前端 Axios 请求，将 Node.js 爬取并处理的数组数据安全、正确地渲染到 HTML 页面的 标签中，避免常见跨环境执行错误。
本文讲解如何通过 express 提供 api 接口，配合前端 axios 请求，将 node.js 爬取并处理的数组数据安全、正确地渲染到 html 页面的 `
` 标签中，避免常见跨环境执行错误。
在 Node.js 服务端（如 Express）中直接操作浏览器 DOM 是不可能的——index.js 是运行在服务器上的 Node.js 环境，而 HTML 中的 <script> 运行在浏览器中，二者隔离且上下文完全不同。你此前尝试在 HTML 中直接引入 index.js（<script src="index.js">）会导致语法错误或静默失败，因为浏览器无法解析 require()、axios()（Node 版本）等服务端 API。</script>
正确的做法是：前后端分离通信——后端暴露 RESTful 接口返回数据，前端通过 AJAX（如 Axios）请求该接口，并将响应内容注入 DOM。
✅ 正确实现步骤
1. 修改后端：提供 /getArray API 接口
将爬虫逻辑封装为 Express 路由处理器，确保仅在收到 HTTP GET 请求时执行，并以 JSON 响应返回结构化数据（推荐用 res.json() 而非 res.send(JSON.stringify(...))，更规范且自动设置 Content-Type: application/json）：
const axios = require('axios');
const cheerio = require('cheerio');
const express = require('express');
const app = express();
const PORT = 8080;
const url = 'MY URL GOES HERE'; // 替换为真实目标 URL
// 静态文件托管（HTML、CSS、JS）
app.use(express.static('.')); // 或指定 'public' 目录
// 核心 API：获取爬取结果
app.get('/getArray', async (req, res) => {
try {
const response = await axios.get(url);
const $ = cheerio.load(response.data);
const textArray = [];
$('.CLASSNAME').each((i, elem) => {
textArray.push({ myTextArray: $(elem).text().trim() });
});
console.log('Scraped data:', textArray);
res.json(textArray); // ✅ 返回原生数组，而非字符串
} catch (err) {
console.error('Scraping failed:', err.message);
res.status(500).json({ error: 'Failed to fetch data' });
}
});
app.listen(PORT, () => {
console.log(`✅ Server running on http://localhost:${PORT}`);
});? 注意：app.use('/', express.static('index.html')) 写法不正确——express.static() 期望路径为目录（如 '.'），不是单个文件。应将 index.html 放在项目根目录或 public/ 下，并使用 app.use(express.static('.'))。
立即学习“前端免费学习笔记（深入）”；
2. 更新前端：用 Axios 请求并渲染
在 index.html 中移除无效的 script 引用，引入浏览器版 Axios，并通过 fetch 或 Axios 发起请求。以下为推荐写法（使用 Axios）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Ingredients List</title>
</head>
<body>
<h1 class="headline">This is the ingredients list</h1>
<p class="array">Loading...</p>
<!-- 浏览器版 Axios CDN -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// 确保端口与后端一致（如 8080）
const API_BASE = 'http://localhost:8080';
axios.get(`${API_BASE}/getArray`)
.then(response => {
const data = response.data;
// 渲染为易读格式：提取文本并拼接，或保留 JSON 结构
const displayText = Array.isArray(data)
? data.map(item => item.myTextArray).join('<br>')
: 'No valid data returned';
document.querySelector('.array').innerHTML = displayText;
})
.catch(error => {
console.error('Failed to load data:', error);
document.querySelector('.array').textContent = 'Error loading data';
});
</script>
</body>
</html>⚠️ 关键注意事项
- 端口一致性：确保前端请求地址（http://localhost:8080）与 app.listen() 的端口完全一致；
-
CORS 安全限制：若前端部署在不同端口（如 http://localhost:3000），需在 Express 中启用 CORS：
npm install cors
const cors = require('cors'); app.use(cors()); // 允许所有源（开发用）；生产环境请配置具体 origin - 错误处理必加：网络失败、爬取异常、DOM 元素不存在等情况均需兜底，避免页面空白；
- 避免 JSON.stringify 后端返回：直接 res.json(array) 让前端拿到原生数组，语义清晰且便于后续处理（如遍历、过滤）；
- Puppeteer 非必需：本场景无需 Puppeteer——它用于服务端模拟浏览器行为（如渲染 JS 动态内容），而你的需求仅是“展示已爬取数据”，纯 API + AJAX 即可高效解决。
至此，你就能在浏览器中看到爬取的文本列表实时渲染在
内。这是 Web 开发中最基础也最核心的前后端协作模式，掌握它将为你后续构建更复杂应用打下坚实基础。
