如何在React中查询Google Cloud SQL MySQL实例及解决express非函数报错

问题根源 #

你遇到的TypeError: express is not a function报错核心原因是运行环境不匹配：

• express是基于Node.js的服务端框架，只能在Node.js环境下运行
• 你当前项目的启动脚本默认是react-scripts start，这是启动React前端开发服务器的命令，代码最终运行在浏览器环境，浏览器不支持Node原生API和express的服务端逻辑，哪怕你安装了express依赖也无法正常调用

修复步骤 #

1. 拆分前后端代码
   不要把express服务端代码放在React的src源码目录中，在项目根目录新建server文件夹，将signup.js、数据库连接配置文件database.js等所有服务端代码移动到该文件夹下。

注意：不要在React前端组件代码中引入任何服务端代码文件，前后端逻辑完全分离，通过HTTP接口交互。

2. 新增后端启动脚本
   修改package.json中的scripts配置，新增node启动后端服务的命令：

"scripts": {
  "start": "react-scripts start",
  "start:server": "node server/signup.js",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

3. 解决跨域问题（必做，否则前端无法调用后端接口）
   给express服务安装cors依赖：

npm install cors

然后在signup.js中引入并启用cors：

require('dotenv').config()
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
// 后面保留你原有代码即可

4. 分别启动前后端服务

• 开第一个终端执行npm run start:server，启动express后端服务，运行在3000端口
• 开第二个终端执行npm start，启动React前端服务，默认会自动切换到3001端口
  前端需要查询用户数据时，直接向http://localhost:3000/users/用户id发请求即可。

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