vue.js - 如何在 NuxtJS 中设置全局 $axios header

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 全局 header 的方式上。

很难找到任何关于如何使用 Nuxt/Axios 模块设置全局 header 的真实示例。我在 docs 中看到使用方法 setToken ，但是它并没有准确地显示放置它的位置。

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

Answer 1

很典型的是，我在发布问题 15 分钟后就开始工作了。

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

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