在React项目中使用oracledb连接Oracle时出现process未定义错误

核心问题 #

oracledb是Node.js专属的Oracle数据库驱动，只能在Node.js后端环境运行，不能直接在浏览器（React前端）中使用：

• 浏览器环境不存在Node.js的process全局对象，因此抛出ReferenceError: process is not defined
• 前端直接连接数据库会明文暴露账号密码，存在严重安全风险

正确解决方案：后端API中转 #

需要搭建一个后端服务（比如用Express），在后端完成Oracle数据库的连接和数据操作，前端通过HTTP请求调用后端接口获取数据。

步骤1：创建后端Express服务 #

1. 初始化后端项目并安装依赖：

mkdir oracle-backend && cd oracle-backend
npm init -y
npm install express oracledb cors

2. 编写后端代码（示例server.js）：

const express = require('express');
const oracledb = require('oracledb');
const cors = require('cors');

const app = express();
app.use(cors()); // 处理跨域
app.use(express.json());

// 数据库连接配置
const dbConfig = {
  user: '你的业务专用用户', // 禁止使用SYS超级用户，创建普通业务用户并分配权限
  password: '你的密码',
  connectString: 'YC_Database' // 确保后端服务器能访问该数据库实例
};

// 测试数据库连接的接口
app.get('/api/test-db', async (req, res) => {
  let connection;
  try {
    connection = await oracledb.getConnection(dbConfig);
    const result = await connection.execute('SELECT SYSDATE FROM DUAL');
    res.json({ success: true, data: result.rows[0] });
  } catch (err) {
    console.error(err);
    res.status(500).json({ success: false, error: '数据库连接失败' });
  } finally {
    if (connection) {
      try {
        await connection.close();
      } catch (err) {
        console.error(err);
      }
    }
  }
});

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

步骤2：修改React前端代码 #

移除前端中oracledb的引用，改用fetch调用后端接口：

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

// 调用后端接口测试数据库连接
useEffect(() => {
  fetch('http://localhost:3001/api/test-db')
    .then(res => res.json())
    .then(data => {
      data.success 
        ? console.log('数据库连接成功，当前数据库时间：', data.data)
        : console.log('数据库连接失败：', data.error);
    })
    .catch(err => console.log('请求后端接口失败：', err));
}, []);

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

额外注意事项 #

• 禁用SYS用户连接：SYS是Oracle超级管理员，仅用于数据库维护，业务操作必须使用普通权限用户
• 确保后端可访问数据库：本地数据库需保证后端与数据库在同一机器；远程数据库需配置网络访问权限
• 跨域处理：除了后端用cors中间件，也可在React项目的package.json中添加"proxy": "http://localhost:3001"简化请求

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