Nuxt.jsでaxiosを使用したAPI通信ができない

Question

前提・実現したいこと

Nuxt.jsでaxiosを使用して外部APIからデータを取得したいのですが、CORSエラーが発生しました、
以下の記事を参考にCORSエラーを解決しようとしましたが、別のエラー（後述）がでてしまいまし。
https://qiita.com/penton310/items/4312ddbe015476fd67ff
https://qiita.com/naokada/items/394c1d85ad2975ba62f0

発生している問題・エラーメッセージ

TypeError: Cannot read property 'setToken' of undefined
    at eval (axios.js?dcce:4)
    at _callee2$ (index.js?f26e:46)
    at tryCatch (runtime.js?96cf:45)
    at Generator.invoke [as _invoke] (runtime.js?96cf:271)
    at Generator.prototype.<computed> [as next] (runtime.js?96cf:97)
    at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
    at _next (asyncToGenerator.js?1da1:25)

該当のソースコード

nuxt.config.js

...
  plugins: [
    '~/plugins/axios'
  ],
...
  axios: {
    proxy: true
  },
  proxy: {
    '/api/': {target: 'API_URL', pathRewrite: {'^/api/': '/'}}
  },

※API_URLには実行したいURLを直打ちしています

plugins/axios.js

export default function({ $axios, redirect }) {
    console.log($axios);
    $axios.setToken('access_token');

    $axios.onResponse(config => {
        $axios.setHeader('Access-Control-Allow-Origin', '*')
    })

}

試したこと

plugins/axios.jsの引数となっている$axiosがundefinedだったので指定されていないようです。
しかし、この関数がどこで呼ばれているかはわかりませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

this.$axiosで動きませんか？

Comments

[tsyu.sa068]

回答ありがとうございます！
%axiosをthis.$axiosにしたところ、別のエラーになりました。

TypeError: Cannot read property '$axios' of undefined
at eval (axios.js?dcce:5)
at _callee2$ (index.js?f26e:46)
at tryCatch (runtime.js?96cf:45)
at Generator.invoke [as _invoke] (runtime.js?96cf:271)
at Generator.prototype.<computed> [as next] (runtime.js?96cf:97)
at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
at _next (asyncToGenerator.js?1da1:25)

Answer 2

Context に $axios を挿入するのは、通常は Axios Module が行うと思うので、Axios Moduleのセットアップができていないのではないでしょうか。

Comments

[tsyu.sa068]

回答ありがとうございます！

nuxt.config.js

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

を追記したところ、以下のエラーが発生し落ちました。
╭─────────────────────────────────────────────────────────────────────────────╮
│ │
│ ✖ Nuxt Fatal Error │
│ │
│ Error: Cannot find module '@nuxtjs/axios' │
│ Require stack: │
│ - C:\sustain\slack-interface\node_modules\@nuxt\core\dist\core.js │
│ - C:\sustain\slack-interface\node_modules\@nuxt\cli\dist\cli-command.js │
│ - C:\sustain\slack-interface\node_modules\@nuxt\cli\dist\cli.js │
│ - C:\sustain\slack-interface\node_modules\nuxt\bin\nuxt.js │
│ │
╰─────────────────────────────────────────────────────────────────────────────╯

package.jsonでみると、axiosはインストールできているように見えます。

"dependencies": {
"axios": "^0.19.0",
},

[aaharu]

axios ではなくて、 axios を Nuxt.js で使うための [@nuxtjs/axios]( https://www.npmjs.com/package/@nuxtjs/axios ) が必要なのです。エラーもそのように出ています。

[tsyu.sa068]

失礼いたしました。axiosのみをインストールしていたみたいです。
@nuxtjs/axiosをインストールしてみます。

[tsyu.sa068]

@nuxtjs/axiosをインストールしたところ、無事起動しました！
ありがとうございました！