Node.js/Axios/ReactJS网络请求始终处于Pending状态问题求助

看起来你遇到的请求Pending问题，大概率不是CORS的锅——CORS问题会直接在浏览器控制台抛出明确的跨域错误提示，而请求一直处于Pending状态，通常是因为后端没有给请求返回完整的响应。咱们从你的代码里揪出几个关键问题：

1. 未处理查询结果为空的场景，导致请求挂起 #

看你的/getposttags和/userpref路由，都只在查询结果有数据时返回响应，如果结果是空数组（比如没有匹配的标签或用户偏好），就完全没有res.send或res.end的调用，浏览器会一直傻等后端响应，自然就Pending了。

修复方案：补充所有分支的响应逻辑，不管结果有没有数据都给前端一个明确的反馈：

app.post("/getposttags", (req, res) => { 
  const post_id = req.body.post_id; 
  let sql = "SELECT * FROM tag INNER JOIN post_tag ON post_tag.tag_id = tag.id AND post_tag.post_id = ? GROUP BY tag.name"; 
  db.query(sql, post_id, (err, result) => { 
    if (err) { 
      // 用return避免后续代码执行，同时返回500错误状态码
      return res.status(500).send({ err: err.message }); 
    } 
    // 不管结果为空还是有数据，都返回响应
    res.send(result); 
  }); 
}); 

app.post("/userpref", (req, res) => { 
  const post_id = req.body.post_id; 
  const user_id = req.body.user_id; 
  db.query( 
    "SELECT * FROM post_pref WHERE user_id = ? AND post_id = ?", 
    [user_id, post_id], 
    (err, result) => { 
      if (err) { 
        return res.status(500).send({ err: err.message }); 
      } 
      // 结果为空就返回null，不要让请求挂着
      res.send(result.length > 0 ? result[0] : null); 
    } 
  ); 
}); 

2. 异步数据库操作提前结束响应，导致逻辑未完成 #

你的/updateleadsprefs路由里，最后直接调用了res.end()，但前面的数据库更新都是异步操作——这意味着你在数据库操作还没完成的时候就结束了响应，而且里面的更新操作既没有错误处理，也没在完成后返回响应。

修复方案：把响应逻辑放在异步操作的回调里，确保所有数据库操作完成后再给前端反馈：

app.post("/updateleadsprefs", (req, res) => { 
  const { id, post_id, user_id, pref, leads } = req.body; 
  console.log(req.body); 

  // 先处理post_pref的更新/插入
  const mainQuery = id > 0 
    ? db.query("UPDATE post_pref SET preference = ? WHERE user_id = ? AND post_id = ?", [pref, user_id, post_id])
    : db.query("INSERT INTO post_pref(post_id, user_id, preference) VALUES(?, ?, ?)", [post_id, user_id, pref]);

  // 处理主查询的错误
  mainQuery.on('error', (err) => {
    return res.status(500).send({ err: err.message });
  });

  // 主查询完成后，再处理post表的leads更新
  mainQuery.on('end', () => {
    db.query("SELECT leads FROM post WHERE id = ?", post_id, (err, result) => { 
      if (err) { 
        return res.status(500).send({ err: err.message }); 
      } 
      if (result.length === 0) {
        return res.status(404).send({ err: "对应的帖子不存在" });
      }
      const newLeads = parseInt(result[0].leads) + leads; 
      db.query( 
        "UPDATE post SET leads = ? WHERE id = ?", 
        [newLeads, post_id], 
        (err, updateRes) => { 
          if (err) { 
            return res.status(500).send({ err: err.message }); 
          } 
          // 所有操作完成后返回成功响应
          res.send({ success: true, updatedLeads: newLeads }); 
        } 
      ); 
    });
  });
});

3. 关于CORS的补充说明 #

你提到不配置CORS页面无法加载，这说明前端和后端确实存在跨域，但CORS本身不会导致请求Pending——如果是CORS配置错误，浏览器会直接拦截请求并在控制台报错，不会让请求一直处于Pending状态。所以先把上面的响应问题修复，应该就能解决大部分Pending的情况。

另外，登录请求正常的原因很简单：你的登录路由应该处理了所有分支的响应（比如成功返回token，失败返回错误），没有遗漏的情况，所以请求能正常完成。

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