Vue+MySQL项目本地运行正常，部署Heroku后数据库关联内容无展示

问题排查与解决方案 #

• 首先修正前端Axios请求的错误写法：你当前传入的headers是数组格式，而Axios要求headers参数为普通对象，错误的格式会导致请求头解析异常，部分本地环境对非法参数容错率高，部署到线上服务就会触发异常。正确写法如下：

getTeams() {
  // headers改为对象格式，无需额外加Access-Control-Allow-Origin请求头
  const headers = { "Content-Type": "application/json" };
  axios.get("你的后端接口地址", { headers })
    .then((response) => {
      this.teams = response.data;
      console.log("Teams", response.data);
    })
    .catch((e) => {
      console.log("error", e);
    });
},

• 移除前端请求头里的Access-Control-Allow-Origin字段：该字段是后端响应头，不需要前端主动在请求中携带，额外添加反而可能触发CORS预检规则，导致请求异常。
• 排查后端数据库连接配置：确认Heroku后台已经正确配置了ClearDB的连接环境变量（数据库地址、用户名、密码、端口），本地运行时用的是本地数据库配置，部署后必须读取Heroku提供的ClearDB连接参数才能正常访问线上数据库。同时要检查后端数据库连接池是否配置了自动重连逻辑，ClearDB默认会主动断开长时间闲置的连接，如果没有重连机制，数据库查询会直接返回空结果且不会抛错。
• 检查后端接口逻辑：查看/api/teams对应的接口代码，是否存在查询出错时未捕获错误、直接返回200状态码+空响应的情况，这种情况会让前端误以为请求成功但拿不到任何数据。可以在后端接口处添加错误日志，部署后查看Heroku的后端运行日志确认查询是否正常执行、是否返回了数据。
• 确认线上数据库是否有数据：你本地数据库的测试数据不会自动同步到ClearDB中，需要手动将数据导入到ClearDB实例中，如果数据库本身没有数据，接口返回空数组，前端如果没有做空状态兼容，页面自然会渲染空白。
• 排查Heroku实例休眠问题：Heroku免费 tier 实例会在长时间无访问后进入休眠状态，首次请求唤醒时可能出现超时、返回空响应的情况，可以多次刷新页面确认是否是休眠导致的偶发问题。

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