javascript - How to set an header with Axios module and vuejs in nuxt - Stack Overflow

admin管理员组

文章数量:1029694

I'm trying to define an "Accept-Language" header for my SPA in vue.js (with nuxt).

Here's what I tried but it doesn't work. I specify that I use the axios module for nuxt.

I created a plugin as explained in the documentation. I included the plugin in nuxt.config.js.

I tried to use setHeader as explained here, but it doesn't work.

export default function ({ store, $axios, redirect }) {
  $axios.setBaseURL(process.env.BASE_URL);

  if (process.server) {
    return
  }

  $axios.onRequest(config => {
    const baseUrl = $axios.defaults.baseURL;

    const locale = store.getters['lang/locale'];

    if (locale) {
      $axios.setHeader('Accept-Language', locale)
    }
  });
}

But this code doesn't work. However, when I make console.log, I see them so it is taken into account.

I'm trying to define an "Accept-Language" header for my SPA in vue.js (with nuxt).

Here's what I tried but it doesn't work. I specify that I use the axios module for nuxt.

I created a plugin as explained in the documentation. I included the plugin in nuxt.config.js.

I tried to use setHeader as explained here, but it doesn't work.

export default function ({ store, $axios, redirect }) {
  $axios.setBaseURL(process.env.BASE_URL);

  if (process.server) {
    return
  }

  $axios.onRequest(config => {
    const baseUrl = $axios.defaults.baseURL;

    const locale = store.getters['lang/locale'];

    if (locale) {
      $axios.setHeader('Accept-Language', locale)
    }
  });
}

But this code doesn't work. However, when I make console.log, I see them so it is taken into account.

• javascript
• vue.js
• axios
• nuxt.js

Share Improve this question Follow asked Jan 15, 2020 at 8:43 JeremyJeremy 1,96255 gold badges2727 silver badges5050 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Use $axios.interceptors instead of $axios.onRequest

export default function({store, $axios, redirect}) {
        $axios.setBaseURL(process.env.BASE_URL);
        if (process.server) {
            return
        }
        $axios.interceptors.request.use((config) => {

            const baseUrl = $axios.defaults.baseURL;

            const locale = store.getters['lang/locale'];

            if (locale) {
                $axios.setHeader('Accept-Language', locale)
            }
            return config;
        });
    }

how are you making the request? 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 $

Instead of $axios.get( ... ) use $axios.$get( ... ) and so on for put, post, delete...

You can also try setting headers this way:

$axios.onRequest(config => {
    const baseUrl = $axios.defaults.baseURL;

    const locale = store.getters['lang/locale'];

    if (locale) {
        config.headers.mon['Accept-Language'] = locale;
    }
});

I'm trying to define an "Accept-Language" header for my SPA in vue.js (with nuxt).

Here's what I tried but it doesn't work. I specify that I use the axios module for nuxt.

I created a plugin as explained in the documentation. I included the plugin in nuxt.config.js.

I tried to use setHeader as explained here, but it doesn't work.

export default function ({ store, $axios, redirect }) {
  $axios.setBaseURL(process.env.BASE_URL);

  if (process.server) {
    return
  }

  $axios.onRequest(config => {
    const baseUrl = $axios.defaults.baseURL;

    const locale = store.getters['lang/locale'];

    if (locale) {
      $axios.setHeader('Accept-Language', locale)
    }
  });
}

But this code doesn't work. However, when I make console.log, I see them so it is taken into account.

I'm trying to define an "Accept-Language" header for my SPA in vue.js (with nuxt).

Here's what I tried but it doesn't work. I specify that I use the axios module for nuxt.

I created a plugin as explained in the documentation. I included the plugin in nuxt.config.js.

I tried to use setHeader as explained here, but it doesn't work.

export default function ({ store, $axios, redirect }) {
  $axios.setBaseURL(process.env.BASE_URL);

  if (process.server) {
    return
  }

  $axios.onRequest(config => {
    const baseUrl = $axios.defaults.baseURL;

    const locale = store.getters['lang/locale'];

    if (locale) {
      $axios.setHeader('Accept-Language', locale)
    }
  });
}

But this code doesn't work. However, when I make console.log, I see them so it is taken into account.

• javascript
• vue.js
• axios
• nuxt.js

Share Improve this question Follow asked Jan 15, 2020 at 8:43 JeremyJeremy 1,96255 gold badges2727 silver badges5050 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Use $axios.interceptors instead of $axios.onRequest

export default function({store, $axios, redirect}) {
        $axios.setBaseURL(process.env.BASE_URL);
        if (process.server) {
            return
        }
        $axios.interceptors.request.use((config) => {

            const baseUrl = $axios.defaults.baseURL;

            const locale = store.getters['lang/locale'];

            if (locale) {
                $axios.setHeader('Accept-Language', locale)
            }
            return config;
        });
    }

how are you making the request? 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 $

Instead of $axios.get( ... ) use $axios.$get( ... ) and so on for put, post, delete...

You can also try setting headers this way:

$axios.onRequest(config => {
    const baseUrl = $axios.defaults.baseURL;

    const locale = store.getters['lang/locale'];

    if (locale) {
        config.headers.mon['Accept-Language'] = locale;
    }
});

本文标签： javascriptHow to set an header with Axios module and vuejs in nuxtStack Overflow