本文详解如何通过 Express 提供 API 接口、前端用 Axios 请求数据，将 Node.js 抓取并结构化的数组内容动态渲染到 HTML 的 标签中，避免直接在浏览器中运行服务端代码。
本文详解如何通过 express 提供 api 接口、前端用 axios 请求数据，将 node.js 抓取并结构化的数组内容动态渲染到 html 的 `
` 标签中，避免直接在浏览器中运行服务端代码。
在 Node.js + Express 构建的 Web 应用中，服务端（如爬虫逻辑）与前端浏览器运行在完全隔离的环境中：index.js 是 Node.js 服务端脚本，不能直接被 <script src="index.js"> 在 HTML 中加载执行</script>——这会导致语法错误或 require is not defined 等运行时异常。正确做法是将后端作为 API 服务，前端通过 HTTP 请求获取数据并更新 DOM。
✅ 正确架构：前后端分离通信
1. 后端：暴露 RESTful API 接口
修改 index.js，使用 app.get() 定义 /getArray 路由，封装爬取逻辑并返回 JSON 响应：
const axios = require('axios');
const cheerio = require('cheerio');
const express = require('express');
const app = express();
const PORT = 8080;
// 静态托管 index.html（注意：需确保文件路径正确）
app.use(express.static('.')); // 或指定 'public' 目录
// 关键：定义 API 路由
app.get('/getArray', async (req, res) => {
const url = 'MY URL GOES HERE'; // 替换为真实目标 URL
try {
const response = await axios.get(url);
const $ = cheerio.load(response.data);
const textArray = [];
$('.CLASSNAME').each(function () { // 注意：无需传 html 第二参数，$ 已加载
textArray.push({ myTextArray: $(this).text().trim() });
});
console.log('✅ 抓取结果:', textArray);
res.json(textArray); // 直接返回 JSON，无需 stringify
} catch (err) {
console.error('❌ 抓取失败:', err.message);
res.status(500).json({ error: 'Data fetch failed' });
}
});
app.listen(PORT, () => {
console.log(`? Server running at http://localhost:${PORT}`);
});
? 关键改进：
- 使用 async/await 提升可读性；
- res.json() 自动设置 Content-Type: application/json 并序列化；
- 移除 app.use('/', express.static('index.html')) 的错误用法（静态托管应指向目录，非单文件）；
- 错误处理更健壮，避免进程崩溃。
2. 前端：用 Axios 请求并渲染数据
在 index.html 中移除无效的 <script src="index.js">，引入 Axios 并调用接口：</script>
<meta charset="UTF-8"><title>Scraped Data Display</title><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>
// 发起 GET 请求
axios.get('http://localhost:8080/getArray')
.then(response => {
const data = response.data;
const paragraph = document.querySelector('.array');
// 方案一：直接显示 JSON 字符串（调试用）
// paragraph.textContent = JSON.stringify(data, null, 2);
// 方案二：格式化渲染为可读文本（推荐）
if (Array.isArray(data) && data.length > 0) {
const formatted = data.map(item => item.myTextArray).join('<br>');
paragraph.innerHTML = formatted;
} else {
paragraph.textContent = 'No data retrieved.';
}
})
.catch(error => {
console.error('⚠️ 请求失败:', error);
document.querySelector('.array').textContent = 'Failed to load data.';
});
</script>
? 渲染提示：
- 使用 innerHTML 支持
换行；若需防 XSS，应先 textContent + 手动转义；- JSON.stringify(data, null, 2) 适合开发调试，但生产环境建议结构化展示；
- 确保前端请求域名与后端服务同源（或已配置 CORS），否则会触发跨域错误（见下文）。
⚠️ 注意事项与常见问题
-
CORS 问题：若前端部署在不同端口（如 http://localhost:3000），需在 Express 中启用 CORS：
npm install cors
const cors = require('cors'); app.use(cors()); // 允许所有来源（开发用），生产环境请限制 origin 端口一致性：前端 axios.get() 中的 URL 必须与 app.listen(PORT) 端口一致（如 8080），且本地需启动服务后访问 http://localhost:8080。
HTML 文件位置：index.html 应与 index.js 同级目录，或通过 app.use(express.static('public')) 指向专用静态资源目录。
Puppeteer 不必要：本场景无需 Puppeteer——它用于服务端渲染或自动化浏览器操作，而你的需求仅是“后端抓取 → 前端展示”，标准 API 模式更轻量、安全、易维护。
通过以上改造，你将获得一个清晰、可维护、符合 Web 标准的数据流：Node.js 负责可靠抓取与数据处理，HTML/JS 负责用户界面呈现，二者通过 HTTP 协议解耦协作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
