Netlify部署的React前端无法连接Heroku上的Node/Express/MongoDB Atlas后端

问题根因 #

setupProxy.js是仅React开发环境生效的代理工具，仅在本地运行npm start启动开发服务时生效。前端打包部署到Netlify后是纯静态资源，没有代理服务支撑，你写的相对路径请求axios.get('/api/artists')会默认请求Netlify的站点域名，根本不会发送到Heroku后端，所以Heroku没有相关日志。

完整解决步骤 #

• 移除前端项目中的setupProxy.js文件，同时删除package.json里的http-proxy-middleware依赖，该工具在线上环境无作用。
• 修改所有前端请求路径，将相对路径替换为完整的后端地址，例如将axios.get('/api/artists')改为axios.get('https://festivalist-api.herokuapp.com/api/artists')。推荐封装统一的axios实例，自动适配开发和线上环境，后续修改地址只需调整一处：

// 示例：新建utils/request.js统一封装请求
import axios from 'axios'
const request = axios.create({
  // 开发环境走本地代理，线上环境走真实后端地址
  baseURL: process.env.NODE_ENV === 'development' ? '/api' : 'https://festivalist-api.herokuapp.com/api'
})
export default request

后续业务请求直接调用封装好的实例即可：request.get('/artists')

• 后端配置CORS跨域支持：先安装cors依赖npm install cors，然后在后端index.js中导入并启用，注意要放在路由注册之前：

import cors from 'cors'

// 放在app.use(express.json())之后、路由注册之前即可
app.use(cors())

• 正确配置环境变量（解决Config Vars冲突问题）：
  1. Heroku的Config Vars是线上环境的环境变量，用来存储数据库密码、加密密钥等敏感信息，避免硬编码到代码中泄露。
  2. 本地开发可以通过dotenv插件管理本地环境变量，避免和线上冲突：
  • 后端安装dotenv：npm install dotenv
  • 在后端index.js最顶部引入：import 'dotenv/config'
  • 后端根目录新建.env文件，写入本地开发用的敏感信息：

  MONGODB_URI=你的MongoDB Atlas连接地址
  SECRET=你的自定义加密密钥
  

  • 将.env添加到.gitignore文件中，不要提交到代码仓库
  • Heroku后台重新配置Config Vars，添加MONGODB_URI和SECRET对应的线上值即可，本地和线上会自动读取对应环境的变量，不会冲突。

常见疑问解答 #

• 为什么请求地址需要加/api前缀：后端index.js中配置了app.use('/api', router)，所有注册在路由中的接口都会自动带上/api前缀，请求必须带此前缀才能匹配到后端的接口规则。
• 部署问题排查技巧：部署后出现异常先打开浏览器控制台的「网络」标签，查看请求的完整地址、状态码、返回内容，可以快速定位是请求地址错误、跨域错误还是后端接口报错。

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