0

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?

3

Any help in this regard would be greatly appreciated.

Joey Bruno
  • 13
  • 4
  • Are you *sure* you have migrated *content* to the deployed DB? Shot in the dark as it wasn't clear if you were using a local db. Regardless, what happens if you use curl locally? – 2e0byo Sep 21 '21 at 20:49
  • When I do a local curl call, all the data returns as it should from the API route I tried. I am using a local DB and connecting that with ClearDB yeah! When I do check that deployed DB locally through Workbench, everything does show up. – Joey Bruno Sep 21 '21 at 21:01
  • Bother, I suppose I could have checked it myself. It works this end too. – 2e0byo Sep 21 '21 at 21:03
  • Added a component I have setup with Axios if that'll help at all in any future questions – Joey Bruno Sep 21 '21 at 21:08
  • The promise is *not* fulfilled---only the cors request is. – 2e0byo Sep 21 '21 at 21:09
  • btw `{ "Access-Control-Allow-Origin": "https://the-fame-of-honor.herokuapp.com" }` you don't set these on the *frontend*, but on the backend (you let the browser handle CORS, but it only sets origin). Doubt that's the problem though – 2e0byo Sep 21 '21 at 21:11
  • Okay deal. Then I just add a header for the promise? Or just include that for the error handling? Then hopefully it works – Joey Bruno Sep 21 '21 at 21:17

1 Answers1

0

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)
}
2e0byo
  • 5,305
  • 1
  • 6
  • 26