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

Question

我一直在努力让它工作两天。我是 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 Not Authorized 错误，基本上说明我Authorization: Bearer <token>的未通过。但是，使用 Postman，我可以验证此端点确实有效并返回我需要的所有 JSON，因此问题必须出在我设置 axios 全局标头的方式上。

很难找到任何关于如何使用 Nuxt/Axios 模块设置全局标头的真实示例。我在文档中看到how to use setToken，但是它并没有确切地显示放置它的位置。

我有什么设置错误，我该如何解决？

Answer 1

非常典型的是，我在发布问题 15 分钟后让它工作。

像这样设置标题似乎有效。我不确定为什么该setToken方法不起作用。

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