如何在基于create-react-app的React应用中读取MongoDB数据？

1. MongoDB Data API（优先推荐，适配你无NodeJS背景的情况） #

• 不用搭建NodeJS后端，直接用axios发HTTP请求就能调用MongoDB官方提供的Data API，读取集合数据
• 操作步骤：在MongoDB Atlas控制台开启Data API，生成API密钥，然后编写axios请求即可，CORS规则可以直接在Atlas后台配置允许你的React应用域名
• 优点：零后端代码，上手快，官方维护稳定，完全满足你展示数据的需求
• 局限：复杂业务逻辑（比如权限校验、批量数据加工）的扩展性一般，但当前场景完全够用

2. 无服务器函数（灵活度更高的轻量方案） #

• 要是觉得Data API不够灵活，试试Vercel Edge Functions、Netlify Functions这类工具，写几行极简代码连接MongoDB查询数据，不用搭建完整的express服务
• 举个例子：在Netlify里写个get-collection.js函数，用官方mongodb包查询数据，前端直接调用这个函数的URL，CORS规则在平台后台配置即可
• 优点：比Data API灵活，能添加简单的数据处理逻辑，同样不用维护长期运行的NodeJS服务

3. express+mongoose+cors（适合未来有复杂业务的情况） #

• 这个方案需要你掌握基础NodeJS知识，要搭建服务、配置CORS、维护依赖，只用来展示数据的话有点“杀鸡用牛刀”
• 但如果之后要加权限控制、数据校验这类复杂逻辑，这个方案的扩展性更好

关于MongoDB的选择 #

• 你已经有现成的MongoDB集合，没必要换数据库，它的文档结构和React状态结构适配性很好，展示数据很顺手

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