Axios-module: How to use '$axios.setHeader'

[dengdan99]

$axios.setHeader('Content-Type', 'application/x-www-form-urlencoded', ['post'])
in plugins/axios.js , but do't work

_{This question is available on Nuxt.js community (#c89)}

[pi0]

Hey. I think this was because of how you are making request itself. Please also share the code you are currently using to make requests.

[awronski]

@pi0 I am not sure if it is related but for me $axios.setHeader wasn't working in the plugin.

What was working was:

export default function ({ $axios, app, store }) {
  $axios.onRequest(config => {
    if (store.state.authToken) {
      config.headers.common['Authorization'] = store.state.authToken
    }
  })
}

The documentation isn't clear about it.

[awronski]

@dengdan99 In the pages I use axios like this:

const config = {
    headers: { 'content-type': 'application/x-www-form-urlencoded' }
}

this.$axios.post(`/post/${id}`, model, config)

[dappiu]

If you want to use the helpers (setHeader, setToken, ...) provided by @nuxtjs/axios, you then must always use the request helpers provided by it, that are simply the lowercase http method names prefixed with a $

Stop doing $axios.get( ... ) and do $axios.$get( ... )
and so on for put, post, delete, ...

And for setting Authorization header you can use the helper function setToken like that prefixes token with token type for you:
this.$axios.setToken(userAccessToken, 'Bearer') is equivalent to this.$axios.setHeader('Authorization', ``Bearer ${userAccessToken}``)

[datng14]

@pi0 I am not sure if it is related but for me $axios.setHeader wasn't working in the plugin.

What was working was:

export default function ({ $axios, app, store }) {
  $axios.onRequest(config => {
    if (store.state.authToken) {
      config.headers.common['Authorization'] = store.state.authToken
    }
  })
}

The documentation isn't clear about it.

You saved my day :)

[JuliusHamvie]

@pi0 I am not sure if it is related but for me $axios.setHeader wasn't working in the plugin.
What was working was:

export default function ({ $axios, app, store }) {
  $axios.onRequest(config => {
    if (store.state.authToken) {
      config.headers.common['Authorization'] = store.state.authToken
    }
  })
}

The documentation isn't clear about it.

You saved my day :)

@pi0 I am not sure if it is related but for me $axios.setHeader wasn't working in the plugin.

What was working was:

export default function ({ $axios, app, store }) {
  $axios.onRequest(config => {
    if (store.state.authToken) {
      config.headers.common['Authorization'] = store.state.authToken
    }
  })
}

The documentation isn't clear about it.

Hi - Thank you very much for that. I have one questions: Where to place that code? I thought that I manipulate the Axios module in the nuxt.config.js file in the module section.

[awronski]

@JuliusHamvie
in plugins/axios.js

[garan82]

@awronski , I add file plugins/axios.js , and in nuxt.config.js I added

plugins: ['~/plugins/axios.js']

In my page, I have

import axios from 'axios'
...
return axios.get('/some-path').then(res => { return { data: res.some-key } })

but on server side I don't get authorization header. Do you know what I'm missing here?

[ram-you]

@garan82

import axios from 'axios'
...
return axios.get('/some-path').then(res => { return { data: res.some-key } })

1. Don't import axios, it's already defined in this.$axios
2. return this.$axios.get('/some-path').then(res => { return { data: res.some-key } })