vueのaxiosでのheadersの取得方法について

vueのaxiosを用いたときのレスポンス内のheaders情報の取得の方法がわかりません。
具体的にはログイン機能をrailsとvueで作成しておりまして、railsで認証するところまではできているのですが、vue側でrails側で返された認証のjsonを受け取る際、access-tokenなど認証に必要なheadersの情報取得できず困っております。
下記写真の「取得したいheadersの情報」の部分にあるclientやaccess-tokenの情報を
axiosを用いて取得したいのですが、実際にaxiosで取得できる情報は、下記２枚目の写真「実際に返るheadersの情報」のようにcache-control,content-typeのみが返ってきているようです。
どのようにしましたら１枚目の写真のようなheadersのclientやaccess-tokenの情報を取得できますでしょうか。
お教えいただけたらとても助かります。よろしくお願いいたします。

■取得したいheadersの情報

■実際に返るheadersの情報

■実際の画面

■ソース

<template>
  <div class="aa">
    <div class="aa">
      <input placeholder="メール" v-model="email"><br>
      <input placeholder="パス" v-model="l_pass"><br>
      <input placeholder="打ち直しパス" v-model="l_v2_pass"><br>
      <button class="btn-flat-dashed-filled" v-on:click="login">作成</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
const api = 'http://localhost:3000/api/v1/auth/sign_in'
export default {
name: 'Login',
components: {

  },

 data: function(){ // データを返す関数にする
        return {
          email:'',
          l_pass:'',
          l_v2_pass:'',

        }

    },

    methods : {
      login: function(){
        axios.post(api, { email: this.email,password:this.l_pass , password_confirmation: this.l_v2_pass}).then((response) => {
            console.log(response);
            // console.log(response.headers.access-token);
          }, (error) => {
            console.log(error);
         });

      },

    }

}
</script>