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

Question

我已经试着让这个功能工作了两天了，我是Nuxt的全新用户（虽然我已经使用Vue好几年了）。我是一个全新的Nuxt用户（虽然我已经使用Vue好几年了），所以我只是在尝试用我的大脑来理解这一切是如何工作的。

在我的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全局头的方式。

如何使用NuxtAxios模块设置全局头，一直很难找到真正的例子。我看到在 文件 如何使用 setToken，然而它并没有完全显示出该放在哪里。

我到底是哪里设置错了，怎么解决？

Answer 1

很典型的情况是，我发布一个问题15分钟后，它就开始工作了。

像这样设置标题似乎可以工作。我不知道为什么 setToken 方法不想工作。

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