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

发布于05月26日

这两天来我一直在努力让它发挥作用.我是Nuxt的新用户(尽管我已经使用Vue好几年了)，所以我只是想了解一下这一切是如何工作的.

在我的Nuxt项目中，我安装了Axios模块:

nuxt.config.js

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

plugins/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模块设置全局头的真实示例.我在docs中看到了如何使用setToken，但是它并没有确切地显示在哪里放置它.

我设置了什么错误，如何修复它？

推荐答案