Search code examples
vue.jsecmascript-6axiosnuxt.js

Nuxt/Axios _axios.default.post is not a function


I am getting the following error when trying to do a axios post. Any ideas?

"_axios.default.post is not a function"

My code

    import axios from '@nuxtjs/axios'
    const configEng = config[process.env.NODE_ENV]
    export async function getTokenHelper(){
    const res = await axios.post(<url>, null, {params: { grant_type: 'client', client_id: configEnv.client_id, client_secret: configEnv.client_secret}})
   return (res.body.token)
}

nuxt.config.js

export default {
  modules: ['@nuxtjs/axios', '@nuxtjs/pwa', '@nuxtjs/proxy'],
  axios: {
    proxy: true,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'Content-Type': 'application/json' },
  },
  proxy: {
    '/api': { 'target': 'https://localhost:8443', 'secure': true },

    server: {
      host: '0.0.0.0', port: 8443, https: {
        key: fs.readFileSync(path.resolve(<keylocation>)), cert: fs.readFileSync(path.resolve(<certlocation>)), ca: fs.readFileSync(path.resolve(<calocation>))
      },
    },
  }
}

More explanation as of my issue

I am attempting to run the code above on the server side in /api where all of my node code is written.
It's making the post call to a "3rd party" token tool written by a different division in our company. I do have a $get that is calling my tokenHelper that sends it back that is existing in my store folder. But the code above is running in my server. It's the only post call I make.


Solution

  • I've formatted your nuxt.config.js for you. There are still some warnings there, that you should be aware of, but nothing blocking I guess.

    What if you make a /pages/test.vue file and try to POST on a JSONplaceholder path, like this.

    <template>
      <button @click="testAxiosCall">Test the call! 🤘</button>
    </template>
    
    <script>
    export default {
      methods: {
        async testAxiosCall() {
          const result = await this.$axios.$post('https://jsonplaceholder.typicode.com/posts', {
            title: 'foo',
            body: 'bar',
            userId: 1,
          })
          console.log('result', result)
        },
      },
    }
    </script>
    

    Does it work as expected in the network tab?