前端向Express后端传递对象至Excel控制器失败求助

前端代码问题修复 #

1. 修正Fetch请求参数 #

• 得加上Content-Type: application/json请求头，不然后端的express.json()没法解析请求体
• 要在请求里传入要发送的对象，别漏了body参数
• 给请求加个基础的错误处理，方便排查问题

修改后的buttonPage.js：

var storedReceivingObject = {
  1:'One',
  2:'Two',
  3:'Three'
}

function btnOverWrite(){
  fetch("http://localhost:3000/storedReceivingObject", {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json' // 新增这个关键请求头
    },
    body: JSON.stringify(storedReceivingObject) // 把前端对象转成JSON字符串传递
  })
  .then(res => res.json())
  .then(data => console.log('请求成功:', data))
  .catch(err => console.error('请求失败:', err));
}

2. 确保对象名称一致 #

如果你的实际要传递的对象是storedReceivingObjectTest，把上面代码里的storedReceivingObject替换成这个名称，避免变量名不匹配导致传空值。

后端代码问题修复 #

1. 修正路由配置 #

原app.js里的app.post('/storedReceivingObject', postRoutes);会导致路由匹配混乱，直接把路由绑定到控制器方法更稳妥：

修改后的app.js：

const express = require ('express');
const app = express();
const path = require('path');
app.use(express.json());
const PostCtrl = require('./controllers/post'); // 直接引入控制器

// Cors配置
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content, Accept, Content-Type, Authorization');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
  next();
});

// 绑定路由到对应控制器方法
app.use('/posts', require('./routes/post'));
app.post('/storedReceivingObject', PostCtrl.createPost); 

module.exports = app;

2. 修复控制器代码 #

• 删掉没用的jsdom和http引入，后端根本不需要模拟DOM
• 读取前端传过来的req.body数据，这才是你要的对象
• 修复forEach里的变量名冲突（把循环里的res改成item，和响应对象重名会出问题）
• 用前端传递的数据生成Excel内容

修改后的post.js控制器：

const XLSX = require('xlsx');

exports.createPost = (req, res, next) => {
  // 获取前端传递的对象
  const receivedData = req.body;
  console.log('前端传来的数据:', receivedData);

  let excelFile = "../ReceivingExcelFile.xlsx";
  let sheetName = "Sheet1";
  let workbook;
  
  try {
    // 尝试读取现有Excel文件，不存在就创建新工作簿
    workbook = XLSX.readFile(excelFile);
  } catch (err) {
    workbook = XLSX.utils.book_new();
  }

  // 把单个对象转成数组（json_to_sheet只接受数组格式）
  const worksheetData = [receivedData];
  const ws = XLSX.utils.json_to_sheet(worksheetData);

  // 替换工作表并写入文件
  workbook.Sheets[sheetName] = ws;
  XLSX.writeFile(workbook, excelFile);

  // 给前端返回响应
  res.status(200).json({ message: '数据已写入Excel', received: receivedData });
};

验证步骤 #

1. 重启后端服务器
2. 点击前端按钮，看浏览器控制台是否有请求成功的日志
3. 后端控制台会打印前端传递的对象数据
4. 打开ReceivingExcelFile.xlsx，检查是否写入了对应内容

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