MERN栈部署Heroku后出现XMLHttpRequest无效URL错误如何修复

• 核心错误来自Axios的baseURL配置逻辑错误：Heroku 分配的process.env.PORT是供后端服务内部监听使用的端口，不是对外公开的访问端口，前端访问Heroku上的应用时默认走HTTPS 443端口，不需要显式拼接端口，拼接后会生成无效的请求URL，触发XMLHttpRequest报错。
• 额外冗余代码：请求逻辑中const data = await response属于重复await操作无意义，JSON.stringify("data")没有赋值也没有返回，属于无效代码。

1. 修正Axios实例配置 #

方案A：分环境配置（适配本地开发+线上部署） #

如果是React前端项目，注意前端自定义环境变量需要加对应框架的前缀（如Create React App需要加REACT_APP_前缀才会在构建时注入前端运行环境）：

const instance = axios.create({
  baseURL: process.env.NODE_ENV === 'production' 
    // 生产环境直接用域名，不加端口
    ? 'https://recit-note-app.herokuapp.com/api/' 
    // 本地开发拼接本地后端端口
    : `http://localhost:${process.env.REACT_APP_LOCAL_BACKEND_PORT || 5000}/api/`,
  timeout: 5000,
  headers: {
    "Content-Type": "application/json",
    accept: "application/json",
  },
});

方案B：同域名简化配置（更推荐） #

如果你的前后端部署在同一个Heroku应用下，不需要写完整域名，直接写相对路径即可，适配所有部署环境：

const instance = axios.create({
  baseURL: '/api/',
  timeout: 5000,
  headers: {
    "Content-Type": "application/json",
    accept: "application/json",
  },
});

2. 清理冗余请求逻辑 #

try {
  const response = await instance.get(`user`, {
    headers: {
      "x-access-token": token,
    },
  });
  // 直接返回后端返回的业务数据即可
  return response.data;
} catch (error) {
  console.error(error);
  return error.response;
}

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