Nuxtでaxiosにトークンを常時付けたいけど上手くいかない

Question

いつもお世話になっております。

Nuxtでaxiosを利用する際に自作プラグイン(@/plugins/axios.js)を用いて全てのリクエストにトークンを付けようとしているのですが上手くいきません。

【Nuxt.js】axiosでheaderにAuthorizationを常につけたい！

や

Nuxt.jsビギナーズガイド のソースコードをコピペしてみても401エラーになってしまいます。

Postmanでheadersにトークンをつけると上手くデータを取得できるのですが…。

またaxios.jsにconsole.logで任意の値を出力はできるので、

恐らく、config.headers.common['Authorization'] または axios.defaults.headers.common['Authorization'] の設定に問題があるのではないかと思っています。

なお、Nuxt自体はインストール直後でカスタマイズ等はしておりません。

どなたか解決策が分かる方ご教授いただけると幸いです。

// @/plugins/axios.js

import axios from 'axios'

export default function({$axios}){
  $axios.onRequest((config) => {

    // axios.defaults.headers.common['Authorization'] = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Im9saXZpZXJAbWFpbC5jb20iLCJpYXQiOjE2MDE1NTYzODksImV4cCI6MTYwMTU1OTk4OSwic3ViIjoiMSJ9.ee960uJHWObwvfnBuBaM8c6PG8MIRsOR1vnkRRYXxBE"
    config.headers.common['Authorization'] = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Im9saXZpZXJAbWFpbC5jb20iLCJpYXQiOjE2MDE1NTYzODksImV4cCI6MTYwMTU1OTk4OSwic3ViIjoiMSJ9.ee960uJHWObwvfnBuBaM8c6PG8MIRsOR1vnkRRYXxBE"

    return config
  })
}

// nuxt.config.js

export default {
  srcDir: 'app',
  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    title: 'project_01',
    meta: [
      {charset: 'utf-8'},
      {name: 'viewport', content: 'width=device-width, initial-scale=1'},
      {hid: 'description', name: 'description', content: ''}
    ],
    link: [
      {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
    ]
  },

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [],

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
    {src: '@/plugins/axios.js'},
  ],

  env: {},

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [],

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    'bootstrap-vue/nuxt',
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
  ],

  // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  axios: {
    baseURL: 'http://localhost:8890',
  },

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {}
}

# pages/index.vue

<template>
  <div class="container mt-5">

  </div>
</template>

<script>
export default {

  async asyncData(app){

    const URL = "/660/posts"
    const res = await app.$axios.$get(URL)

    console.log(res);

    return {
      data
    }
  }

}
</script>

Answer 1

下記のようにコードを修正してみてください。

# 間違い
config.headers.common['Authorization'] = ...

# 正解
config.headers.Authorization = ...

Comments

[matsuo_basho]

ご回答いただき誠にありがとうございます！
ご提案いただいたように修正してみたのですが、変わらず401エラーが発生してしまいます。
それぞれのページ(index.vueのような)で、都度headers: {Authorization: `Bearer ${TOKEN}`,} のように設定しても問題なく記事取得ができるので、やはプラグインを利用してのaxiosのヘッダーにトークンをつけるのが上手くいかないようですね。。。

[yuhigash]

config.headers.Authorization = `Bearer .....` ですね。
現状のコードは「Bearer 」がついていませんでした。コチラも修正お願いいたします。

[matsuo_basho]

yuhigashさん、ありがとうございます！！