从React连接远程MySQL数据库无响应，该如何排查解决？

• 先排查路由触发逻辑
  你写的/db查询逻辑是GET路由回调，只有主动访问http://localhost:3002/db才会执行，仅启动Express服务不会触发该段代码，自然不会输出对应的console日志。另外注意你启动日志的端口拼接错误，原代码里的http://localhost/${PORT}/要改成http://localhost:${PORT}/，斜杠换成冒号，避免访问错地址。
• 补全数据库连接初始化逻辑
  你当前仅调用了mysql.createConnection()创建连接实例，没有主动触发连接建立，要在db.js导出前添加连接校验代码：

db.connect((err) => {
  if (err) {
    console.log('数据库连接失败：', err)
    return
  }
  console.log('数据库连接成功')
})

如果这一步就输出错误日志，可以直接根据报错信息定位是参数错误、远程网络不通还是权限问题。

• 完善接口错误返回逻辑
  原代码中查询报错仅控制台打印错误，没有给前端返回响应，会导致请求一直挂起无返回。修改路由代码：

app.get("/db", (req, res) => {
    db.query("SELECT * FROM users", (err, result) => {
        if(err) {
            console.log(err);
            // 新增错误返回
            res.status(500).json({msg: '查询失败', error: err.message})
        } else {
            res.send(result);
            console.log(result);
            console.log('Connected!');
        }
    });
});

• 排查远程MySQL访问权限
  先在本地用MySQL客户端工具（如Navicat、mysql命令行）测试能否用你填写的host、端口、账号密码连接目标数据库，连接失败的话按以下顺序排查：

1. 远程服务器防火墙/安全组是否开放了MySQL端口的入站规则
2. 远程MySQL是否允许你当前的IP访问，需要登录远程MySQL执行授权命令：

GRANT ALL PRIVILEGES ON 你的数据库名.* TO '你的用户名'@'你本地的公网IP' IDENTIFIED BY '你的密码';
FLUSH PRIVILEGES;

如果允许所有IP访问可以把IP换成%，生产环境不建议这么配置。

• 确认架构逻辑合理性
  React是前端框架，不能直接在前端代码中直连MySQL，你当前的前端调用Express接口、后端操作数据库的架构是正确的，不要在React组件中引入mysql模块尝试直连数据库，会暴露账号密码且浏览器环境不支持Node.js的mysql模块。

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