如何在 NuxtJS 中使用 axios 添加全局拦截器？

Question

我正在使用 NuxtJS。所以我想阅读一些响应头并将它们保存在 VueJS 商店中。我看到了以下文档：https://axios.nuxtjs.org/extend.html。 据说，我可以添加一些 axios 插件来处理请求、响应...... 这是 nuxt 网站上建议的配置： nuxt.config.js

{
  modules: [
    '@nuxtjs/axios',
  ],

  plugins: [
    '~/plugins/axios'
  ]
}

问题 1： 为什么 plugins 没有声明为 ~/plugins/axios.js ？ ~/plugins/axios 有区别吗？ 为避免错误出现以下错误：

 ERROR  Failed to compile with 1 errors                                        friendly-errors 13:12:58

This dependency was not found:                                                 friendly-errors 13:12:58
                                                                               friendly-errors 13:12:58
* eventsource-polyfill in multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
                                                                               friendly-errors 13:12:58
To install it, you can run: npm install --save eventsource-polyfill  

我写：

plugins: [
        '~/plugins/axios.js'
      ]

在 plugins/axios.js 中编写如下代码拦截器：

export default function ({ $axios, redirect }) {
   $axios.onRequest(config => {
        console.log('Making request to ' + config.url)
    }),


    $axios.onResponse(response => {
        console.log(" RESPONSE  ####################### ")
    })
}

当我运行我的应用程序并执行一些请求时。我没有看到登录控制台。 问题 2： 缺少什么？

然后我检查我的包 json：

 {
  "name": "wp-nuxt",
  "version": "1.0.0",
  "description": "Headless WordPress with Nuxt",
  "author": "Me",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.10.2",
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0"
  }
}

问题3：为什么我的nuxt模块里面没有axios模块？

问题4： nuxt节点模块下有axios怎么办？

感谢您的帮助。

Answer 1

nuxt.config.js：

module.exports = {
  modules: [
   '@nuxtjs/axios',
  ],

  axios: {
    // proxyHeaders: false
  }
}

更新：Axios 模块与 Nuxt.js 集成。如果您想将Axios 与Nuxt.js 项目一起使用，这将是很好的集成。您可以查看更多信息 -> https://axios.nuxtjs.org/setup.html#install