点击按钮时如何从React前端向Node.js Express后端发送数据

嘿，作为React和Node.js新手，刚接触后端路由确实容易在请求处理上踩坑，我来帮你梳理下代码里的问题和解决办法：

你当前的Node.js代码 #

app.get('/list-certs', function (req, res) { 
  fs.readFile("certs.json", 'utf8', function (err, data) { 
    console.log( data ); 
    res.send( data ); 
  }); 
})
app.post('/list-certs', function (req, res) { 
  res.send('POST request: ' + req.body.domain-input); 
  console.log('post is working!') 
}); 

核心问题与修复步骤 #

• POST请求无法获取req.body：Express默认不会自动解析请求体内容，所以你直接访问req.body会得到undefined。需要在路由定义前添加请求体解析中间件：
  • 如果前端发送的是JSON格式请求，添加：

    app.use(express.json());
    

  • 如果是传统表单提交（application/x-www-form-urlencoded格式），添加：

    app.use(express.urlencoded({ extended: true }));
    

• 属性访问语法错误：req.body.domain-input里的-是减号，JavaScript不允许用点语法访问带特殊字符的对象属性，得改成方括号语法：req.body['domain-input']；或者让前端把字段名改成domainInput这种驼峰格式，这样就能用req.body.domainInput正常访问了。
• 遗漏错误处理：GET路由里的fs.readFile没有处理读取失败的情况，建议加上错误捕获，避免服务崩溃。

修复后的完整示例代码 #

const express = require('express');
const fs = require('fs');
const app = express();

// 先添加请求体解析中间件
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.get('/list-certs', function (req, res) { 
  fs.readFile("certs.json", 'utf8', function (err, data) { 
    if (err) {
      return res.status(500).send('读取证书文件失败，请检查文件路径');
    }
    console.log(data); 
    res.send(data); 
  }); 
})

app.post('/list-certs', function (req, res) { 
  const domainInput = req.body['domain-input'];
  // 先判断字段是否存在，避免返回undefined
  if (!domainInput) {
    return res.status(400).send('请提供domain-input字段');
  }
  res.send(`POST request: ${domainInput}`); 
  console.log('post is working!', '输入的域名:', domainInput); 
}); 

你提到的“另外，我的...内容”没写完，如果还有前端请求或者其他相关问题，补充细节后我再帮你进一步排查~

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