ReactJS+NodeJS+MySQL项目注册请求超时无数据入库如何修复？

1. 修正客户端请求地址错误 #

当前App.js中的接口地址存在2处核心错误：

• 错误使用https协议，本地开发的Node服务默认未配置SSL证书，应使用http协议
• localhost和端口3001之间缺少冒号分隔符，正确格式为localhost:3001
  修改App.js中register方法的请求地址：

// 原错误写法
Axios.post("https://localhost3001/register", {
// 修改后正确写法
Axios.post("http://localhost:3001/register", {

2. 修复服务端接口无响应问题 #

当前服务端的/register接口执行完数据库操作后未向前端返回任何响应，会导致前端请求一直挂起直到超时。修改服务端index.js的接口逻辑：

app.post("/register", (req, res) => {
  const username = req.body.username;
  const password = req.body.password;

  db.query(
    "INSERT INTO test (username, password) VALUES (?,?)",
    [username, password],
    (err, result) => {
        if(err) {
          // 数据库操作失败返回错误信息
          return res.status(500).json({msg: "注册失败", error: err})
        }
        // 操作成功返回正常响应
        res.json({msg: "注册成功", data: result})
    }
  );
});

3. 补充前端请求错误捕获 #

避免出现未捕获的Promise异常，给Axios请求添加catch逻辑：

Axios.post("http://localhost:3001/register", {
  username: usernameReg,
  password:passwordReg,
}).then((response) => {
  console.log(response);
}).catch(err => {
  console.error("注册请求出错：", err)
})

• 把密码输入框的type属性从text改为password，避免密码明文显示
• 确认本地3001端口没有被防火墙、安全软件拦截
• 如果Node服务未运行在本机，将请求地址中的localhost替换为服务端所在设备的局域网IP

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