React使用mysql包连数据库报错：Uncaught ReferenceError: process is not defined

根本原因 #

你在React前端代码中直接使用mysql包连接数据库是错误且不安全的：

• mysql是Node.js后端专用库，依赖Node.js的process等全局变量，浏览器环境不存在这些变量，因此抛出process is not defined错误。
• 前端代码会被打包后暴露给用户，数据库账号密码等敏感信息会直接泄露，严重威胁数据库安全。

正确解决方案：前后端分离架构 #

1. 后端创建API接口（Node.js + Express示例） #

新建后端项目或在现有后端中添加接口，统一处理数据库查询逻辑：

// server.js
const express = require('express');
const mysql = require('mysql');
const cors = require('cors'); // 解决跨域请求问题
const app = express();

// 数据库连接配置（仅后端使用，不会暴露给前端）
const con = mysql.createConnection({
  host: "你的数据库地址",
  user: "你的数据库用户名",
  password: "你的数据库密码",
  port: '3306',
  database: "hs_db"
});

con.connect(err => {
  if (err) throw err;
  console.log("数据库连接成功");
});

app.use(cors());
app.use(express.json());

// 搜索接口：接收关键词，返回匹配的产品数据
app.get('/api/search', (req, res) => {
  const keyword = req.query.keyword;
  // 使用参数化查询防止SQL注入
  const sql = "SELECT * FROM products WHERE name LIKE ? OR description LIKE ?";
  const values = [`%${keyword}%`, `%${keyword}%`];
  
  con.query(sql, values, (err, results) => {
    if (err) return res.status(500).json({ error: err.message });
    res.json(results);
  });
});

app.listen(3001, () => {
  console.log("后端服务运行在http://localhost:3001");
});

安装依赖：npm install express mysql cors，启动后端：node server.js

2. 前端修改代码调用API #

在Search.jsx中移除所有mysql相关代码，改用fetch或axios调用后端接口：

// Search.jsx
import { useState } from 'react';

function Search() {
  const [keyword, setKeyword] = useState('');
  const [products, setProducts] = useState([]);

  const handleSearch = async () => {
    if (!keyword.trim()) return;
    try {
      const response = await fetch(`http://localhost:3001/api/search?keyword=${encodeURIComponent(keyword)}`);
      const data = await response.json();
      setProducts(data);
    } catch (error) {
      console.error("搜索失败：", error);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
        placeholder="输入关键词搜索"
      />
      <button onClick={handleSearch}>搜索</button>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default Search;

为什么不推荐前端直接连数据库？ #

• 安全风险：数据库账号密码会被用户直接获取，攻击者可随意操作数据库。
• 环境不兼容：Node.js专属库依赖的全局变量在浏览器中不存在，会引发各类运行错误。
• 维护成本高：无法统一处理权限控制、缓存、SQL注入防护等核心逻辑，后续迭代难度大。

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