所以我对编程相对来说是个新手，我试图更好地掌握后端和前端如何连接以及它们应该在哪里连接，这样我就可以在未来的项目中使用它。所以我很好奇的是，如果你为前端和后端创建一个目录，你的前端是一个react应用程序，还有一个带有express API的后端，用于对mongodb数据库进行CRUD操作。对于react应用程序，我可以使用简单的fetch请求吗？如果可以，URL应该指向哪里？它是否只是网站的域名（假设目录托管在同一个地方），或者你必须做一些像服务器的IP地址，然后将其定向到express API？任何澄清将不胜感激：）
我尝试使用mongodb的API进行身份验证和数据库访问，但我没有让连接工作，我发现我做错了什么，但随着我做了更多的研究，我意识到我想做一些更类似于上面的方法。
1条答案
按热度按时间8aqjt8rx1#
基于你的问题，对于react应用，我可以使用简单的fetch请求吗？看起来你想构建一个本地后端API，在那里你可以从react应用发出前端请求。假设后端有nodejs和express，然后创建API endpoints/routes（crud）似乎是学习如何构建全栈应用的一个很好的起点。
后台：在服务器端，定义一个基本的node + express服务器示例，它可以监听端口：5000。然后，编写一个GET请求到for ex.
/products路由，该路由将从虚拟列表中返回一个产品列表，以便您可以在进入真实的数据库设置之前轻松测试这些端点，如mongodb或postgres。前端：在你的react端，在一个组件中，定义一个useEffect钩子，它将调用一个使用fetch API的函数，是的，你可以定义一个单独的API调用，让一个fetch函数向你的后端服务器发出请求调用，比如：
字符串
然后，一旦你从后端获得响应数据，准备在你的jsx中呈现产品列表。在本地创建一个全栈应用程序有不止一个可能的环境，但我建议从一个简单的API路由开始，然后从那里添加更多的端点并在浏览器中记录这些响应，研究不同的HTTP方法，如GET，POST，不要害怕得到那些网络错误，404或500，你调试错误和接触这些网络日志的次数越多，你就越能准备好构建更复杂的应用程序。
我强烈建议您首先向社区展示您所研究的内容，然后通过共享代码片段或潜在错误来了解和构建，以便我们知道如何更好地提供帮助。
进一步阅读：
https://developer.mozilla.org/en-US/docs/Web/API/fetch
还要研究CORS概念（在其中一种情况/本地服务器设置中，您需要定义跨源/跨服务器通信所需的CORS报头）https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS