javascript - 如何在 nuxt 中使用 Axios 模块和 vuejs 设置 header

Question

我试图在 vue.js 中为我的 SPA 定义一个“Accept-Language” header 。 (与 nuxt )。

这是我尝试过的方法，但它不起作用。我指定我使用 axios module for nuxt .

我创建了一个插件 explained in the documentation .我将该插件包含在 nuxt.config.js 中。

我尝试按照说明使用 setHeader here , 但它不起作用。

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)
    }
  });
}

但是这段代码不起作用。但是，当我创建 console.log 时，我看到了它们，所以它被考虑在内。

Answer 1

使用$axios.interceptors而不是 $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;
        });
    }