MERN Stack上线应用需本地启服务器才显示用户数据的疑问

这是正常情况吗？ #

绝对不正常。线上网站的前端应该连接线上部署的后端服务，而非你本地的开发服务器。你当前的问题核心是前端API请求指向了本地地址，导致只有本地服务器运行时才能获取数据。

是否必须本地启动服务器？ #

完全不需要。只要将后端服务部署到线上环境，前端连接线上后端的地址，就能脱离本地服务器正常展示数据。

解决办法 #

• 部署后端服务：把你的Express后端部署到线上托管平台（比如Vercel、Render、Railway），部署完成后会获得一个公开的API访问地址（例如https://your-backend-service.onrender.com）。
• 修正前端API地址：
  • 找到前端代码中所有请求后端的地址（比如axios.get('http://localhost:5000/api/users')这类代码），替换为刚才拿到的线上API地址。
  • 建议用环境变量区分开发和生产环境：开发时在.env文件中设置REACT_APP_API_URL=http://localhost:5000，生产环境配置为线上API地址，部署前端时同步环境变量。
• 检查后端配置：
  • 确保后端连接的是线上数据库（比如MongoDB Atlas），而非本地MongoDB。
  • 配置CORS允许前端的线上域名访问（比如用cors包设置origin: 'https://your-frontend-site.com'）。
  • 后端端口不要硬编码，使用process.env.PORT适配平台的端口分配。
• 重新部署前端：将修改后的前端代码重新部署到线上，确保新的API地址生效。

完成以上步骤后，关闭本地服务器，访问线上网站就能正常加载用户数据了。

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