如何将Google Cloud MySQL数据库连接到React应用？是否需用Express中间件？

绝对不要直接从React连接MySQL #

• 安全风险：前端代码会被完全暴露，数据库的用户名、密码、地址等敏感信息会直接泄露，任何人都能利用这些信息攻击你的数据库。
• 跨域限制：浏览器的同源策略会阻止前端直接访问MySQL的3306端口，除非你把数据库完全公开到公网，这无疑是把数据库暴露在攻击之下。
• 注入风险：前端直接拼接SQL语句极易引发SQL注入攻击，没有中间层做参数过滤和校验。

使用Express作为中间件是标准且安全的方案 #

核心优势 #

• 安全性：数据库凭证仅存储在后端服务器，前端只与后端API交互，不会泄露任何敏感信息。
• 可控性：可以在后端实现权限校验、参数验证、SQL注入防护（比如使用参数化查询），还能对数据进行格式转换，给前端返回结构化的JSON数据。
• 兼容性：后端可以轻松处理跨域问题，无需在数据库层面做危险的配置。

简单实现步骤 #

1. 搭建Express后端

首先安装依赖：

npm install express mysql2 cors

然后编写后端代码（示例）：

const express = require('express');
const mysql = require('mysql2');
const cors = require('cors');
const app = express();

// 配置CORS，允许你的React前端域名访问
app.use(cors({ origin: 'http://your-react-app-domain.com' }));
app.use(express.json());

// 创建MySQL连接池（比单连接更高效稳定）
const pool = mysql.createPool({
  host: 'your-gcp-mysql-public-ip', // GCP SQL实例的公网IP或私有IP（如果同VPC）
  user: 'your-db-username',
  password: 'your-db-password',
  database: 'your-database-name',
  connectionLimit: 10 // 根据需求调整连接数
});

// 示例API：获取指定分类的数据
app.get('/api/items', (req, res) => {
  // 使用参数化查询，避免SQL注入
  pool.query('SELECT id, name, price FROM products WHERE category = ?', [req.query.category], (err, results) => {
    if (err) {
      console.error('数据库查询错误:', err);
      return res.status(500).json({ error: '获取数据失败' });
    }
    res.json(results);
  });
});

// 启动服务器
const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
  console.log(`服务器运行在端口 ${PORT}`);
});

2. React前端调用API

使用fetch或axios调用后端接口，获取数据后渲染页面：

import { useState, useEffect } from 'react';

function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        const response = await fetch('http://your-express-server-url/api/items?category=electronics');
        if (!response.ok) throw new Error('请求失败');
        const data = await response.json();
        setProducts(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchProducts();
  }, []);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误：{error}</div>;

  return (
    <div className="product-list">
      <h2>电子产品列表</h2>
      <ul>
        {products.map(product => (
          <li key={product.id}>
            {product.name} - ${product.price}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ProductList;

GCP MySQL配置注意事项 #

• 确保GCP SQL实例的防火墙规则允许Express服务器的IP地址访问3306端口；如果Express也部署在GCP上，建议使用VPC网络连接，避免公网暴露。
• 给数据库用户分配最小必要权限，不要使用root用户连接应用。

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