Vue/MySQL 数据库未在线显示，但在本地？

Question

目前，当我在本地运行我的应用程序时，一切都按预期工作。但是，当我将所有内容推送到 Heroku 服务器时，连接到 MySQL 数据库的页面内容不会在没有任何 CORS 错误或在 Chrome 开发工具中进行提取调用时出现任何错误。页面本身加载，但在 header.

之后它只是空白

我已连接到 ClearDB 并且后端已部署。我可以查看我希望使用 Axios 获得的所有路由，只是与 Heroku 上的预期不同。这是我在设置的 Vue 组件中调用的一个 API

    getTeams() {
      const headers = [{ "Content-Type": "application/json" }, { "Access-Control-Allow-Origin": "https://the-fame-of-honor.herokuapp.com" }];
      axios.get("https://fame-of-honor-server.herokuapp.com/api/teams", { headers })
        .then((response) => {
          this.teams = response.data;
          console.log("Teams", response.data);
        })
        .catch((e) => {
          console.log("error", e);
        });
    },

如果有帮助，这里是后端和前端的代码。

Server Code（节点，快递，MySQL）

Front End Code (Vue)

下面是我为查看是否发生任何错误而执行的获取请求，但是响应已经完成，但仍然没有数据通过那里。所以我觉得很奇怪？

在这方面的任何帮助将不胜感激。

Answer 1

如果您查看已部署应用程序的网络检查器（如果您不希望它链接，则不链接）它甚至不会尝试来获取数据：它因错误 TypeError: r.toUpperCase is not a function 而停止。它甚至没有尝试获取（任何获取错误都是另一回事）。

查看代码，抛出的错误（这可能是也可能不是整体问题）很可能归因于 header 作为数组而不是单个 object 传递。（参见 this question ）具体来说，您应该像这样传递 headers：

  methods: {
    getTeams() {
      const headers = { "Content-Type": "application/json" };
      axios.get("https://fame-of-honor-server.herokuapp.com/api/teams"), headers)
        .then((response) => {
          this.teams = response.data;
          console.log("Teams", response.data);
        })
        .catch((e) => {
          console.log("error", e);
        });
    },
  },

如果您需要多个 header，只需将它们放在 object 中即可。请注意，您 不应该 发送 Access-Control-Allow-Origin：这是由后端响应 Origin [=30] 发送的=] 浏览器会自动添加。

用现代js也可以这样写，个人觉得更易读：

try {
  const { data } = await axios.get(url, headers);
  this.teams = data;
} catch(e) {
  console.error(e)
}

Vue/MySQL 数据库未在线显示，但在本地？

Vue/MySQL Database not appearing online, but is locally?

mysql

express

vue.js

server