如何将Node.js生成的JSON对象发送至HTML端？

问题情况 #

生成JSON对象后尝试发送到HTML制作数据表格，但请求一直处于pending状态：Chrome开发者工具网络标签显示请求pending，控制台无输出；Postman请求也一直卡在“发送请求”阶段。尝试了fetch和AJAX两种方式均未成功。

核心错误分析 #

• 混用Express与原生HTTP服务：Express本身已封装HTTP服务能力，无需手动创建http.createServer并在回调中处理路由，这会导致Express的路由规则无法正常生效，请求得不到响应。
• 动态在请求中注册路由：在/player的请求分支里才注册/test路由，逻辑错误且原生HTTP回调未处理/test请求，导致请求进入后无任何响应动作，一直pending。
• CORS配置错误：Access-Control-Allow-Origin设置为接口路径http://localhost:9000/test，正确值应为允许的前端域名（如*或具体域名http://localhost:8080）。

修正后的Node.js代码 #

const express = require("express");
const app = express();

// 解析请求体
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

// 根路径返回HTML页面
app.get("/", (req, res) => {
  res.writeHead(200, { "Content-type": "text/html" });
  // 保留原页面渲染逻辑（确保teams等变量已定义）
  const outMap = Array.from(teams)
    .map((el) => homepageTeamLister(teamsListHTML, el))
    .join("");
  res.end(outMap);
});

// /test接口返回JSON数据
app.get("/test", (req, res) => {
  // 开发环境允许所有源，生产环境请指定具体前端域名
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Methods", "GET");
  const myObj = { name: "John", age: 30 };
  res.json(myObj); // 自动设置Content-Type为application/json，比res.send更规范
});

// 启动服务
app.listen(9000, "127.0.0.1", () => {
  console.log("listening on port 9000");
});

修正后的前端代码 #

console.log("Entered Script");

// Fetch方式（同域用相对路径）
fetch('/test')
  .then(res => {
    if (!res.ok) throw new Error(`HTTP错误：${res.status}`);
    return res.json();
  })
  .then(data => {
    console.log("Hi? : ", data);
  })
  .catch(err => console.error('请求错误:', err));

// AJAX方式（补全闭合代码，同域用相对路径）
$.ajax({
  url: '/test',
  method: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, err) {
    console.error('AJAX错误:', err);
  }
});

注意事项 #

• 确保teams、homepageTeamLister、teamsListHTML这些变量在你的Node.js代码中已正确定义，否则根路径请求会报错。
• 生产环境禁止使用Access-Control-Allow-Origin: *，需指定具体的前端域名（如HTML页面运行在http://localhost:8080，则设置为该地址）。
• 若前端页面与后端服务不同域，必须正确配置CORS，否则会触发跨域拦截。

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