React应用使用Fetch调用Express接口从MongoDB取数的疑问

架构老林

2026-7-7

问题解答

1. React完全可以使用Fetch请求

Fetch是浏览器原生的HTTP请求API，无需额外安装依赖，非常适合新手快速实现前后端数据交互。你可以直接在React组件的useEffect钩子或者事件处理函数里调用它。

2. 请求URL的指向规则

URL写法分开发环境和**生产环境（同主机部署）**两种场景：

开发环境（前后端本地分开运行）

通常React默认跑在http://localhost:3000，Express API跑在另一个端口（比如http://localhost:5000），这时候必须写完整的API地址，同时要在Express后端配置CORS（安装cors包并启用），避免浏览器跨域拦截。
示例代码：

// React组件中调用Fetch获取数据
useEffect(() => {
  fetch('http://localhost:5000/api/items')
    .then(response => response.json())
    .then(data => console.log('获取到的数据:', data))
    .catch(error => console.error('请求失败:', error));
}, []);

生产环境（前后端同主机部署）

如果前后端部署在同一个域名下（比如前端静态文件由Express托管，或通过Nginx反向代理），可以直接使用相对路径。浏览器会自动拼接当前页面的域名，这样换域名时无需修改前端代码。
假设你的Express API路由前缀是/api，示例代码：

fetch('/api/items')
  .then(response => response.json())
  .then(data => console.log('获取到的数据:', data))
  .catch(error => console.error('请求失败:', error));

比如你的站点域名是https://yourdomain.com，浏览器会自动把请求发送到https://yourdomain.com/api/items。