Same API call works in component but not in Vuex Store: CORS Preflight Did Not Succeed

[maxfrischknecht]

Running on

• nuxtjs/axios": "^5.12.3",
• "nuxt": "^2.15.4"

The Axios Config:

  axios: {
    baseURL: process.env.APIURL,
    proxyHeaders: false,
    credentials: false
  },

The following call works (from a page/component):

async asyncData ({ $axios, params }) {
    const auth = {
      username: process.env.APIUSER,
      password: process.env.APIKEY
    }
    const response = await $axios.post(
      'api/query',
      {
        // my query ...
      },
      { auth }
    )
    const entries = response.data.result
    return { entries }
  },

While the following call in store/index.js doesn't:

  async getCvPosts ({ commit }) {
    const auth = {
      username: process.env.APIUSER,
      password: process.env.APIKEY
    }
    await this.$axios.$post(
      'api/query',
      {
         // my query ...
      },
      { auth }
    ).then((response) => {
      const entries = response.result
      console.log('success!', entries)
    })
  },

The error in the console is the following:

CORS Preflight Did Not Succeed. It responds with a Status of 404 Not Found and the following error message Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at MYAPI. (Reason: CORS preflight response did not succeed).

On my server all the necessary headers are set. And it seems to be a problem caused by Axios because when calling from the component it works and only after trying to call the API from the store produces a problem.

Did anyone happen to run into this issue and found a solution?

[Stormiks]

I also had a similar problem when using the @nuxtjs/axios v5.13.1 version of the module, in conjunction with nuxt v2.15.3. I haven't found a solution to this problem yet.

[maxfrischknecht]

@Stormiks Did you find any workaround? Or did you just swop the axios module?