React前端调用Node.js Express后端POST接口返回net::ERR_EMPTY_RESPONSE错误排查

核心问题总结 #

React+Node.js Express搭建的网站调用/api/register接口时请求超时，返回ERR_EMPTY_RESPONSE，Postman请求返回Incomplete response received from application，数据库无新增记录，同时手动启动应用时出现EADDRINUSE :::3000错误。以下是具体错误点和修复方案：

一、关键错误点 #

1. Express路由未接收req/res参数
   /api/register路由处理函数未声明req（请求对象）和res（响应对象），导致无法获取前端传参，也无法给前端返回响应，请求超时挂起。
2. CORS中间件未正确调用
   app.use(cors)未执行函数调用，中间件未生效，可能引发跨域相关问题。
3. 数据库连接未初始化
   创建了MySQL连接对象，但未调用connect()建立实际连接，SQL查询无法执行。
4. 端口配置错误+端口占用
   启动日志显示Server listening on port sdfsd，说明listen方法中错误使用了字符串而非port变量；手动启动时端口3000被GUI已启动的应用占用。
5. 响应格式不匹配
   后端用res.sendStatus(200)返回无内容响应，但前端fetch尝试解析JSON，导致额外报错。

二、修复步骤 #

1. 修复路由参数缺失

修改/api/register路由，添加req和res参数，并调整响应格式：

app.post('/api/register', function(req, res) { // 新增req、res参数
  const email = req.body.email;
  console.log(email);
  const todoList = JSON.stringify(req.body.todoList);
  console.log(todoList);
  const query = `INSERT INTO users (username, todo_list) VALUES (?, ?)`;
  console.log(query);
  connection.query(query, [email, todoList], function(error) {
    if (error) {
      console.error('Error registering user:', error);
      res.status(500).json({ error: error.message });
    } else {
      res.status(200).json({ success: true, message: '用户注册成功' }); // 返回JSON格式响应
    }
  });
  console.log("query done");
});

2. 正确启用CORS中间件

将app.use(cors)改为：

app.use(cors()); // 调用cors函数，启用中间件

3. 初始化数据库连接

在创建连接对象后添加连接逻辑：

const connection = mysql.createConnection({
  host: '127.0.0.1',
  user: 'evogenes_shbc',
  password: 'mitsMysq27',
  database: 'evogenes_Users'
});

// 新增数据库连接代码
connection.connect(function(err) {
  if (err) {
    console.error('数据库连接失败:', err);
    return;
  }
  console.log('已连接到MySQL数据库');
});

4. 修复端口配置并解决端口占用

修改启动日志的端口变量：

app.listen(port, function() {
  console.log(`Server listening on port ${port}`); // 替换sdfsd为port变量
});

端口占用处理：无需手动执行node app.js，直接通过ifastnet的GUI管理应用启停；若需手动启动，先执行lsof -i :3000（Linux）找到占用进程，用kill -9 [进程ID]杀死后再启动。

5. 统一所有路由的响应格式

修改/api/save路由，确保返回JSON响应：

app.post('/api/save', function(req, res) {
    console.log("saving")

    const email = req.body.email;
    const todoList = JSON.stringify(req.body.todoList);
    const query = `UPDATE users SET todo_list = ? WHERE username = ?`;

    console.log(email);

    connection.query(query, [todoList, email], function(error) {
        if (error) {
            console.error('保存待办列表失败:', error);
            res.status(500).json({ error: error.message });
          } else {
            res.status(200).json({ success: true, message: '待办列表已保存' });
        } 
    });
});

6. 前端适配响应格式

调整前端fetch逻辑，适配后端的JSON响应：

fetch('http://evogenesis.co.uk:3000/nodeapp/api/register', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data)
})
.then(response => {
    if (!response.ok) {
      return response.json().then(err => { throw new Error(err.error) });
    }
    return response.json();
})
.then(data => {
    console.log('Success:', data);
    // 可添加注册成功后的业务逻辑，比如页面跳转
})
.catch(error => {
    console.error('Error:', error);
});

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