Vuejs with axios request in vuex store: can't make more than one request, why?

Question

I'm building some vuejs dashboard with vuex and axios, between others, and I've been struggling for a while on a pretty pesky problem: it seems I can't make more than one request! All subsequent calls fail with this error:

Fetching error... SyntaxError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'Bearer {the_entire_content_of_the_previous_api_response}' is not a valid HTTP header field value.

My store looks like that:

import axios from "axios";

const state = {
  rawData1: null,
  rawData2: null
};

const actions = {
  FETCH_DATA1: ({ commit }) =>
  {
    if (!state.rawData1)
      return axios.get("/api/data1")
      .then((response) =>
      {
        commit("SET_RAW_DATA1", response.data);
      });
  },

  FETCH_DATA2: ({ commit }) =>
  {
    if (!state.rawData2)
      return axios.get("/api/data2")
      .then((response) =>
      {
        commit("SET_RAW_DATA2", response.data);
      });
  }
};

const mutations = {
  SET_RAW_DATA1: (state, data) =>
  {
    state.rawData1 = data;
  },

  SET_RAW_DATA2: (state, data) =>
  {
    state.rawData2 = data;
  }
};

export default
{
  namespaced: true,
  state,
  actions,
  mutations
};

I don't think my API has any problem, as everything seems to work smoothly via Postman.

Maybe it's obvious for some, but I can't spot what's the matter as I'm still quite a vue noob...

Oh, and I'm handling the axios Promise like this, if this is of any interest:

this.$store.dispatch("api/FETCH_DATA1").then(() =>
{
  // parsing this.$store.state.api.rawData1 with babyparse
}).catch((err) =>
{
  this.errorMsg = "Fetching error... " + err;
});

After @wajisan answer, it does seem to work with "traditional" calls, but not with fetching file calls. I've tried stuff with my Echo api, to no avail... More details there: Serving files with Echo (Golang).

Any ideas, pretty please? :)

Answer 1

your code seems very correct, i think that your problem is from the API.
You should try with another one, just to make sure :)

Answer 2

Well, played a bit more with axios config and manage to make it work (finally!). I just created a axios instance used by my store, and the weird header problem thingy disappeared! I'm not exactly sure why, but seems to be because of some things going on in the default axios config between my calls...

Even if not much has changed, the new store code:

import axios from "axios";

const state = {
  rawData1: null,
  rawData2: null
};

const api = axios.create({ // Yep, that's the only thing I needed...
  baseURL: "/api"
});

const actions = {
  FETCH_DATA1: ({ commit }) =>
  {
    if (!state.rawData1)
      return api.get("/data1") // Little change to use the axios instance.
      .then((response) =>
      {
        commit("SET_RAW_DATA1", response.data);
      });
  },

  FETCH_DATA2: ({ commit }) =>
  {
    if (!state.rawData2)
      return api.get("/data2") // And there too. Done. Finished. Peace.
      .then((response) =>
      {
        commit("SET_RAW_DATA2", response.data);
      });
  }
};

const mutations = {
  SET_RAW_DATA1: (state, data) =>
  {
    state.rawData1 = data;
  },

  SET_RAW_DATA2: (state, data) =>
  {
    state.rawData2 = data;
  }
};

export default
{
  namespaced: true,
  state,
  actions,
  mutations
};

Hope that'll help someone!