Vue/MySQL 数据库未在线出现，但在本地？

Question

目前，当我在本地运行我的应用程序时，一切正常。但是，当我将所有内容推送到 Heroku 服务器时，连接到 MySQL 数据库的页面内容不会在没有任何 CORS 错误或在 Chrome 开发工具中执行 fetch 调用时出现任何错误。页面本身会加载，但在页眉之后只是空白。

我已连接到 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（节点、Express、MySQL）

Front End Code (Vue)

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

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

Answer 1

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

查看代码，抛出的错误（可能是也可能不是整体问题）很可能归结为作为数组而不是单个对象传递的标头。 （见this question）具体来说，你应该像这样传递标题：

  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);
        });
    },
  },

如果您需要多个标题，只需将它们放在对象中即可。请注意，您不应该发送Access-Control-Allow-Origin：这是由后端发送的，以响应浏览器将自动添加的Origin标头。

现代js也可以这样写，我个人认为比较容易阅读：

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