如何在NuxtJS中设置全局$axios头部？

Question

我已经试图让这个工作两天了。虽然我已经使用Vue几年了，但我是Nuxt的新用户，所以我只是试图理解这一切如何运作。

在我的Nuxt项目中，我已经安装了Axios模块：

nuxt.config.js

export default {
  plugins: [
    ...
    '~/plugins/axios',
  ],
  axios: {
    baseURL: 'https://my-url.com/wp-json/wp-v2',
    https: true,
  },
}

插件/axios.js

export default ({ $axios, env }) => {
  $axios.onRequest(config => {
    $axios.setToken(env.WP_API_KEY, 'Bearer');
  });
}

在我的页面中，我试图使用asyncData函数从WordPress API拉取数据，如下所示：

export default {
  async asyncData(context) {
    const data = await context.$axios.$get('/media');
    console.log(data);
    return { data };
  }
}

我一直收到401未经授权的错误，基本上是说我的Authorization: Bearer <token>没有被传递。然而使用Postman，我可以验证这个端点确实有效，并返回我所需的所有JSON，因此问题必须在我设置的axios全局头部中。

找到关于如何使用Nuxt/Axios模块设置全局头部的真正示例很困难。我在文档中看到了如何使用setToken，但它并没有明确显示该放置在哪里。

我设置错了什么，应该如何解决？

- J. Jackson

Answer 1

相当典型，我在发帖15分钟后就解决了问题。像这样设置标题似乎有效。我不确定为什么“setToken”方法无法正常工作。

这篇文章发布后15分钟，我成功解决了问题。使用这种方式设置标题似乎起作用了。我不确定为什么“setToken”方法无法正常运行。

export default ({ $axios, env }) => {
  $axios.onRequest(config => {
    config.headers.common['Authorization'] = `Bearer ${env.WP_API_KEY}`;
  });
}

- J. Jackson

---

你把这个放在哪里？ - v3nt

这段代码是在单独的文件中吗？它位于哪里？ - ST80

@ST80 我已经好几个月没看过这段代码了，但我猜想我把它放在了原帖中提到的 plugins/axios.js 文件中。 - J. Jackson

Answer 2

如果您正在使用Nuxt认证模块，这是我实现的方法。

// nuxt.config.js
modules: [
 '@nuxtjs/auth',
 '@nuxtjs/axios',
],
auth: {
strategies: {
  local: {
    endpoints: {
      login: { url: '/auth/login', method: 'post', propertyName: 'accessToken' },
      logout: false,
      user: { url: '/auth/me', method: 'get', propertyName: false }
    },
  }
},
redirect: {
  login: '/auth/signin',
  logout: '/auth/signin',
  callback: false,
  home: false,
},
cookie: false,
token: {
  prefix: 'token',
},
  plugins: ['~/plugins/auth.js'],
},



// plugins/axios.js
export default function ({ $axios, $auth, redirect, store }) {
$axios.onRequest((config) => {
    config.headers = {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'Authorization': store.state.auth.tokenlocal, // refers to nuxt.config.js->auth.token
    }
})

    $axios.onError((error) => {
        if (error.response.status === 500) {
            redirect('/error')
        }
    })
}



// store/index.js
export const getters = {
    authenticated(state) {
        return state.loggedIn;
    },
    user(state) {
        return state.user;
    }
};

export const state = () => ({
    busy: false,
    loggedIn: false,
    strategy: "local",
    user: false,
});

- Manjunath Reddy

Answer 3

如果您需要通过注册拦截器和更改全局配置来自定义axios，则必须创建一个nuxt插件。

export default ({ $axios, env }) => {
  $axios.onRequest(config => {
    config.headers.common['Authorization'] = `Bearer ${env.WP_API_KEY}`;
  });
}

添加axios拦截器

- Mohammadreza Khalili