基于MERN栈开发的应用部署：API调用地址是否需修改？

核心结论 #

必须把指向localhost的API地址替换成后端部署后的实际公网访问地址，否则前端部署到线上后，根本无法访问你本地机器上的后端服务。

具体操作步骤 #

1. 用环境变量管理API地址（推荐最佳实践） #

别硬编码API地址，用环境变量区分开发和生产环境，切换更省心：

• 前端（React）：在项目根目录创建.env.development和.env.production文件
  • 开发环境配置：REACT_APP_API_URL=http://localhost:5000
  • 生产环境配置：REACT_APP_API_URL=https://your-backend-deployed-domain.com
  • 代码里调用API时，用process.env.REACT_APP_API_URL替代硬写的localhost
• 后端（Node/Express）：同样用环境变量配置端口、数据库连接串等敏感信息，避免泄露

2. 后端部署关键注意点 #

• 把后端部署到云服务（比如Render、Vercel、AWS EC2等），拿到部署后的公网域名或IP
• 确保后端服务的端口对外开放（比如云平台分配的端口，或你指定的5000这类端口）
• 配置CORS权限：在Express里用cors中间件，允许前端部署后的域名访问，示例代码：

  const cors = require('cors');
  app.use(cors({ origin: 'https://your-frontend-deployed-domain.com' }));
  

3. 前端部署流程 #

• 执行npm run build生成生产环境静态文件包
• 把生成的build文件夹部署到静态托管服务（比如Netlify、Vercel、阿里云OSS等）
• 部署完成后，用浏览器控制台检查API请求是否能正常到达后端地址，排查跨域或地址错误问题

4. 本地开发的便捷方案（可选） #

本地开发时不想频繁切换地址，可以在React的package.json里加代理配置：

"proxy": "http://localhost:5000"

这样前端请求/api/xxx会自动转发到http://localhost:5000/api/xxx，但生产环境仍需替换为实际后端地址

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