打开index.html报mongoDB.js: require is not defined错误如何解决

• require 是Node.js环境特有的模块化API，浏览器原生环境没有这个API，这就是你在终端用Node执行代码正常，但浏览器打开HTML报错的核心原因。
• 你现在用的MongoDB官方Node.js驱动是服务端工具包，设计上就不允许直接在前端浏览器运行，否则会有严重的安全风险：你把数据库的明文账号密码直接写在前端代码里，任何人打开页面都能直接拿到凭据，完全控制你的数据库。

你需要用「前端+后端接口」的分层架构实现需求：

1. 单独写一个后端服务（可以用Node.js的Express/Koa框架），在后端代码里实现MongoDB的连接、查询逻辑，对外暴露HTTP接口。
2. 前端HTML页面不要直接引入操作数据库的mongoDB.js，而是用fetch调用你写的后端HTTP接口，拿到返回的查询数据后再渲染到页面上。

简单实现示例 #

1. 后端部分（文件命名为server.js） #

const express = require('express')
const { MongoClient } = require('mongodb')
const app = express()
const port = 3000
// 允许跨域，前端开发阶段用
app.use(require('cors')())

async function getDbList() {
  const uri = "mongodb+srv://<usr>:<pass>@cluster0.dfgj3.mongodb.net/myFirstDatabase?retryWrites=true&w=majority";
  const client = new MongoClient(uri);
  try {
    await client.connect();
    const databasesList = await client.db().admin().listDatabases();
    return databasesList.databases.map(db => db.name)
  } finally {
    await client.close();
  }
}

// 暴露查询接口
app.get('/api/db-list', async (req, res) => {
  try {
    const list = await getDbList()
    res.json({ code: 0, data: list })
  } catch (e) {
    res.json({ code: 1, msg: e.message })
  }
})

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

2. 前端部分修改 #

删掉HTML里对mongoDB.js的引入，在fetchAPI.js里写调用后端接口的逻辑：

async function displayQuery() {
  const res = await fetch('http://localhost:3000/api/db-list')
  const result = await res.json()
  if (result.code === 0) {
    document.getElementById("query").innerHTML = '数据库列表：' + result.data.join('、')
  } else {
    document.getElementById("query").innerHTML = '查询失败：' + result.msg
  }
}

3. 启动流程 #

• 先安装后端依赖：npm install express mongodb cors
• 启动后端服务：node server.js
• 再打开前端HTML页面即可正常获取数据

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