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

Question

Currently, when I'm running my application locally, everything works just fine as intended. However, when I push everything to the Heroku server, the page contents that are connected to the MySQL Database do not show up without any CORS errors or any errors when doing a fetch call in Chrome Dev Tools. The Page itself loads, but it is just blank after a header.

I'm connected to ClearDB and the backend is deployed. I can view all the routes I would like to get with Axios, just not as intended on Heroku. Here is one API call I have in a Vue Component I have setup

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

Here is the code for both backend and frontend if that helps.

Server Code (Node, Express, MySQL)

Front End Code (Vue)

Below is the fetch request I do to see if any errors happen, but the response is fulfilled but no data comes through there still. So it is very strange I think?

Any help in this regard would be greatly appreciated.

Answer 1

If you look at the web inspector for the deployed app (not linking in case you don't want it linked) it doesn't even try to fetch the data: it stalls on an error TypeError: r.toUpperCase is not a function. It's not even trying the fetch (any fetching errors are another matter).

Looking at the code the error being thrown (which may or may not be the overall problem) is likely down to the headers being passed as an array rather than a single object. (see this question ) Specifically you should pass headers like this:

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

If you need multiple headers, just put them in the object. Note that you shouldn't send Access-Control-Allow-Origin: that's sent by the backend in response to an Origin header which the browser will add automatically.

With modern js you can also write it like this, which I personally think is easier to read:

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