浏览器端调用pg模块报Uncaught ReferenceError: require is not defined如何解决

问题根源 #

你遇到的报错有两个核心问题：

1. require() 是 Node.js 环境特有的模块导入语法，浏览器环境没有原生支持，直接在前端页面的<script>标签里使用必然会报错。
2. 你安装的pg包是专门为 Node.js 服务端环境开发的 PostgreSQL 连接库，本身不支持在浏览器端运行。除此之外，直接在前端代码中硬编码数据库账号、密码等敏感信息属于极高危操作，所有访问页面的用户都可以直接通过源码拿到你的数据库权限，会导致数据泄露、被篡改甚至删库等严重问题。

正确的解决方案 #

你需要采用「前端 + 后端分离」的架构实现需求：前端负责页面交互，后端服务负责对接数据库，前端通过 HTTP 接口和后端通信。

步骤1：搭建后端服务 #

新建一个单独的服务端项目目录，执行以下命令初始化：

npm init -y
npm install express pg cors

新建server.js文件，写入以下代码：

const express = require('express')
const cors = require('cors')
const { Client } = require('pg')
const app = express()
const port = 3000

// 允许跨域请求
app.use(cors())

// 数据库连接配置
const pgClient = new Client({
  user: 'postgres',
  host: 'localhost',
  database: 'helloworld',
  password: 'Mypostgres2021',
  port: 5432,
})
pgClient.connect(err => {
  if (err) throw err
  console.log('数据库连接成功')
})

// 提供查询接口
app.get('/test-connect', async (req, res) => {
  try {
    // 这里可以补充你需要的数据库查询逻辑
    res.json({ status: 'success', message: 'Connected' })
  } catch (err) {
    res.status(500).json({ status: 'error', message: err.message })
  }
})

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

运行后端服务的命令：

node server.js

步骤2：修改前端代码 #

你的前端页面代码修改为调用后端接口，不再直接操作数据库：

<!DOCTYPE html>
<html>
<head>
  <label id="Connected">Waiting...</label>
</head>
<body>
  <button  class="btn btn-success" onclick="connect()">Load Query</button>
</body>
<script>
async function connect() {
  try {
    const res = await fetch('http://localhost:3000/test-connect')
    const data = await res.json()
    document.getElementById("Connected").innerHTML = data.message;
  } catch (err) {
    document.getElementById("Connected").innerHTML = "连接失败";
  }
}
</script>
</html>

注意事项 #

• 所有数据库操作逻辑必须全部放在服务端实现，前端只负责接收展示结果，生产环境需要给后端接口加参数校验、权限控制，避免恶意调用。
• 生产环境不要硬编码敏感信息，建议通过环境变量加载数据库密码等配置。

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