React中如何通过Axios正确传递字符串变量至Node.js服务器用于数据库查询？

核心问题 #

你的代码存在三个关键问题：

1. 客户端GET请求的参数传递方式错误
2. 服务端参数接收方式不匹配
3. 存在严重的SQL注入漏洞

1. 修正客户端Axios请求 #

GET请求的参数需要通过params字段传递（而非直接传入对象），同时要将recd加入useEffect的依赖数组，确保参数变化时重新发起请求：

const recd = props.transGenre; // 示例值："horror"

useEffect(() => {  
  (async()=>{
    // 通过params传递查询参数
    const reqGenre = await axios.get('./genre', { params: { recd } });
    console.log(reqGenre.data);
    setGenreList2(reqGenre.data);
  })(); 
}, [recd]); // 加入依赖，参数更新时自动重新请求

2. 修正服务端参数接收 #

你当前用req.params.recd接收参数，但params对应URL路径中的动态参数（如/genre/:recd），而GET查询参数需要用req.query.recd：

app.get('/genre', (req, res) => {
  console.log('/genre');
  const getGenre = req.query.recd; // 改用req.query获取查询参数
  console.log(getGenre);
  
  // 修复SQL语法，同时使用参数化查询避免注入
  const sql = 'SELECT * FROM moviedb WHERE genre LIKE ? ORDER BY opendate DESC';
  // 用%包裹参数实现模糊匹配
  db.query(sql, [`%${getGenre}%`], (err, data) => {
    if (!err) {
      res.send(data);
      console.log(data);
    } else {
      console.log(err);
      res.status(500).send('服务器查询失败'); // 返回错误状态码给客户端
    }
  });
});

3. 必须修复的SQL注入风险 #

绝对不能直接将用户输入的参数拼进SQL语句！攻击者可以通过构造恶意参数（如' OR 1=1 --）获取所有数据甚至篡改数据库。使用参数化查询（?作为占位符）是行业标准的安全做法。

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