本文详解如何使用 Express 框架安全、高效地将 Node.js 生成的 JSON 数据发送至前端 HTML，并通过 fetch 或 jQuery 正确接收与解析，解决常见 CORS、路由冲突及服务器配置错误问题。
本文详解如何使用 express 框架安全、高效地将 node.js 生成的 json 数据发送至前端 html，并通过 `fetch` 或 jquery 正确接收与解析，解决常见 cors、路由冲突及服务器配置错误问题。
在构建前后端分离或轻量服务端渲染应用时，将 Node.js 动态生成的 JSON 数据（如用户列表、统计结果、表格源数据）可靠地传递给前端 HTML 页面，是基础但关键的一环。初学者常因混合使用原生 http.createServer 与 Express 路由、误配 CORS 头、静态资源路径混乱或监听方式错误，导致 fetch('/test') 请求卡在“pending”状态、控制台无响应、甚至服务无法启动。
✅ 正确架构：只用 Express，弃用原生 HTTP 服务器
你原始代码中同时使用了 http.createServer() 和 express()，并试图在回调内嵌套 app.get() —— 这会导致路由未被 Express 实际注册，/test 接口根本不存在。Express 应作为唯一 Web 服务器入口，所有路由必须通过 app.METHOD() 显式声明：
const express = require("express");
const app = express();
// ✅ 正确：启用 JSON 解析中间件（处理 POST/PUT 的 JSON body）
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
// ✅ 正确：托管静态文件（HTML/CSS/JS）—— 将 index.html 放入 public/ 目录
app.use(express.static("public"));✅ 正确声明 API 路由（无需手动写 HTTP 头）
app.get("/test", ...) 必须在 app.listen() 之前定义，且不应嵌套在其他请求处理器中。关于 CORS：开发阶段若前端与后端同域（如均运行在 http://localhost:9000），无需设置 Access-Control-Allow-Origin；若跨域（如前端在 http://localhost:5173），应设为 * 或具体前端地址，且需允许凭证（如需 Cookie）：
app.get("/test", (req, res) => {
// 开发环境可临时允许所有来源（生产环境请严格限制）
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Methods", "GET");
const myObj = { name: "John", age: 30, teams: ["Team A", "Team B"] };
res.json(myObj); // ✅ 推荐：自动设置 Content-Type: application/json 并序列化
});⚠️ 注意：res.send(myObj) 在 Express 中会自动识别对象并设为 JSON 响应，但 res.json() 语义更明确、更安全，是首选。
立即学习“前端免费学习笔记（深入）”；
✅ 前端 HTML 结构与请求实践
将 HTML 文件置于 public/index.html（Express 静态托管默认目录），确保脚本在 DOM 加载后执行。以下为精简可靠的示例：
<!DOCTYPE html>
<html>
<head><title>JSON Data Demo</title></head>
<body>
<h1>Player Data Table</h1>
<div id="table-container"></div>
<!-- 使用 CDN 引入 jQuery（可选） -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
console.log("Frontend script loaded");
// ✅ 方式一：原生 fetch（推荐，现代标准）
fetch("/test")
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => {
console.log("Received data:", data);
// 示例：动态生成表格
const table = `<table border="1"><tr><th>Name</th><th>Age</th></tr>
<tr><td>${data.name}</td><td>${data.age}</td></tr></table>`;
document.getElementById("table-container").innerHTML = table;
})
.catch(err => console.error("Fetch failed:", err));
// ✅ 方式二：jQuery AJAX（兼容旧项目）
$.get("/test")
.done(data => console.log("jQuery success:", data))
.fail((xhr, status, err) => console.error("jQuery error:", err));
</script>
</body>
</html>? 常见错误与规避指南
| 错误现象 | 根本原因 | 修复方案 |
|---|---|---|
| fetch 请求显示 “pending” | 服务器未真正监听 /test 路由（如路由定义在错误作用域内） | 确保 app.get("/test", ...) 在 app.listen() 前、且不在其他回调中 |
| 控制台报 CORS policy 错误 | 前端域名与后端不一致，且未正确配置 CORS 头 | 使用 cors 中间件（npm install cors）或手动设置 Access-Control-Allow-Origin: *（开发期） |
| Cannot GET /test | HTML 未通过 express.static 托管，或访问路径非根目录 | 访问 http://localhost:9000/（自动加载 public/index.html），而非直接打开 HTML 文件 |
| 数据未解析为对象，而是字符串 | 前端未调用 .json() 或服务端未设 Content-Type: application/json | 使用 res.json() 替代 res.send()，前端务必链式调用 .json() |
✅ 启动服务
最后，使用 app.listen() 启动（而非 http.createServer().listen()）：
app.listen(9000, "127.0.0.1", () => {
console.log("✅ Express server running at http://localhost:9000");
});运行 node app.js，访问 http://localhost:9000 即可看到 HTML 页面成功获取并渲染 JSON 数据。此模式结构清晰、符合 Express 最佳实践，可无缝扩展为多路由、数据库集成及真实业务逻辑。
