Quasar v2 SSR axios base url changes after refresh

[kuntik17]

Hello there,

I am using Quasar v2 and have problem with Axios.. Everything works fine unless I refresh the page.

Here is the boot file;

import { boot } from "quasar/wrappers";
import axios from "axios";

// Be careful when using SSR for cross-request state pollution
// due to creating a Singleton instance here;
// If any client changes this (global) instance, it might be a
// good idea to move this instance creation inside of the
// "export default () => {}" function below (which runs individually
// for each client)

export default boot(({ app, store, router }) => {
  // for use inside Vue files (Options API) through this.$axios and this.$api
  // let token = LocalStorage.getItem("socia_token");

  const $axios = axios.create({
    baseURL: "https://myheroku-app.com/api",
  });

  app.config.globalProperties.$axios = $axios;

  app.config.globalProperties.$axios = axios;
  // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
  //       so you won't necessarily have to import axios in each vue file

  app.config.globalProperties.$api = $axios;
  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
  //       so you can easily perform requests against your app's API
  store.$axios = $axios;
  router.$axios = $axios;
});

and on my quasar conf file,
boot: [ { path: "axios", server: false }, { path: "auth", server: false }, ],

All of the pages need auth, so if I refresh app it checks the token and if there is a token app starts with /index page. Only one page is public and at that page I don't have any auth protection.

Page gets the information by prefetch, which works fine if i go that page via index page, however if i refresh app on that page, boom! app crashes.

This is the prefetch;

  preFetch({ store, currentRoute }) {
    return store.dispatch("playlist/findPlaylist", currentRoute.params.id);
  },

My backend is different than my frontend domain, but when I refresh the app I see that my axios try to call front end domain.

This is my vuex code;

return this.$axios
      .get("/playlists/findplaylist", {
        params: {
          id: payload,
        },
      })
      .then((response) => {

I also try to call like this;

   return this.$axios
      .get("https://myherokuapp-app.com/api/playlists/findplaylist", {
        params: {
          id: payload,
        },
      })
      .then((response) => {

But on my logs i see that axios calls, https://myherokuapp-client.com/api/playlists/findplaylist , i couldn't figure it out..

[kuntik17]

I don't know what was I thinking but when I changed the setup to

boot: [ { path: "axios" }, { path: "auth", server: false }, ],

it works fine..