部署在Heroku的MERN应用后端无法访问，如何设置Axios动态请求地址？

一、Axios动态地址适配方案 #

你目前的问题核心是前端写死了本地后端地址，部署到Heroku后用户浏览器请求localhost:5000自然无法找到云端的后端服务，直接修改Axios的基础地址为相对路径即可：

import axios from 'axios'

// 去掉写死的域名，直接用相对路径
const CONNECTION_URL = "/admin"

export const createUser = (user) => axios.post(CONNECTION_URL, user)
export const getUser = (user) => axios.get(`${CONNECTION_URL}/login/${user.email}&${user.password}`)
export const resetPassword = (email) => axios.get(`${CONNECTION_URL}/reset/${email}`)
export const updatePassword = (info) => axios.patch(`${CONNECTION_URL}/reset`, info)

这个方案的原理是你在Heroku上是前后端同服务部署，前端静态资源由同一个Node服务返回，请求相对路径会自动带上当前服务的域名，生产环境自动请求Heroku的后端地址，不需要额外配置。

二、本地开发环境适配 #

如果本地开发时你是前后端分开启动（React跑3000端口，后端跑5000端口），只需要在React项目根目录的package.json中新增一行代理配置即可：

{
  "name": "your-react-project",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000", // 新增这行
  // 剩下的原有配置不变
}

本地开发时React的开发服务器会自动把相对路径的API请求转发到5000端口的后端，和生产环境逻辑完全一致，不需要额外切换地址。

三、其他需要修正的代码问题 #

排查完地址问题如果还有故障，检查以下几个你代码里的隐藏bug：

• 服务端MongoDB连接的错误捕获块变量名错误：你catch接收的参数是err，打印的时候写的是error，会导致报错，修改为：

  .catch((err) => console.log(`Connection Error: ${err}`))
  

• 服务端路由注册顺序错误：你现在把app.get('*')返回前端页面的逻辑写在了路由注册前面，会导致所有API请求都被拦截直接返回前端页面，需要把路由注册移到静态资源配置前面：

  // 先注册API路由
  app.use("/register", userRoute)
  app.use("/admin", adminRoute)
  
  // 再配置生产环境静态资源和前端路由 fallback
  if (process.env.NODE_ENV === 'production') {
      app.use(express.static(path.join(__dirname, 'client','build')))
      app.get('*', (req, res) => {
          res.sendFile(path.join(__dirname, 'client', 'build'))
      })
  }
  

• 检查MongoDB Atlas的IP白名单配置：需要把Heroku服务器的IP加入白名单，或者直接设置允许所有IP访问（配置项为0.0.0.0/0），否则Heroku服务无法连接MongoDB数据库。

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