如何使用VanillaJS连接MongoDB数据库？

首先明确：MongoDB官方驱动是为服务端运行环境设计的，无法直接在浏览器端的VanillaJS中运行；就算用第三方兼容方案强行连接，也会把数据库连接账号密码、访问凭证直接暴露在前端公开代码中，任何人都能拿到凭证对数据库进行任意操作，存在极高的安全风险。

下面是两种不需要开发完整后端服务的可行方案：

方案1：使用MongoDB Atlas Data API（门槛最低） #

MongoDB Atlas官方提供了托管的Data API接口，你不需要编写任何后端代码，直接在前端通过HTTP请求就能操作数据库，所有鉴权和请求转发都由MongoDB官方处理。
操作步骤：

• 注册MongoDB Atlas账号，创建免费的共享级集群
• 在集群控制台开启Data API功能，生成专属的API端点和访问密钥
• 根据业务需求配置密钥的访问权限，仅开放必要的集合读写权限，不要开启全量操作权限
• 前端直接用fetch调用API即可，示例代码如下：

// 前端VanillaJS代码示例
const fetchMongoData = async () => {
  const res = await fetch("你的Atlas Data API端点地址", {
    method: "POST",
    headers: {
      "api-key": "你生成的Data API访问密钥",
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      "dataSource": "你的集群名称",
      "database": "你的数据库名",
      "collection": "你要操作的集合名",
      "filter": { } // 你的查询条件
    })
  })
  const data = await res.json()
  console.log(data)
}

方案2：使用Serverless无服务函数（灵活性更高） #

如果需要自定义业务逻辑、做参数校验，可以用平台托管的无服务函数，只需要写十几行代码部署即可，不需要维护完整后端服务，数据库凭证保存在服务端环境变量中不会泄露。
示例逻辑：

1. 在Vercel/Netlify等平台创建函数，在函数内用MongoDB Node.js驱动连接数据库

// 服务端无服务函数示例（仅在服务端运行，代码不会暴露到前端）
import { MongoClient } from 'mongodb'
export default async function handler(req, res) {
  const client = await MongoClient.connect(process.env.MONGODB_URI)
  const db = client.db('你的数据库名')
  const data = await db.collection('你的集合名').find({}).toArray()
  client.close()
  res.status(200).json(data)
}

2. 前端VanillaJS直接调用这个函数的部署地址即可：

fetch('你的无服务函数部署地址')
  .then(res => res.json())
  .then(data => console.log(data))

注意：无论用哪种方案，都不要给访问凭证开放超出业务需要的权限，避免恶意操作导致数据丢失。

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