javascript(axios)でページ遷移や更新前にrequest headerに値を仕込む前処理を行いたい

サーバーサイドにrailsを使っているアプリがあります。
以下のコードに記載しているのですが、railsのコードにbefore_action:authenticate_api_v1_user!というコールバックがあり、リクエストヘッダーに入っているtoken等の値を検証し、認証済みユーザか確認を行うメソッドです。

このheaderにtokenなどを仕込むのを共通処理化したく、以下の様に
beforeunloadを使い、例えば更新前にheaderを仕込むコードを書いてみたのですが、
正しいアクセストークンなのにも関わらず上手く認証が通りません。

axios.defaults.headers.common['hoge']でデフォルトでヘッダーにtokenを加えたりしているのですが、
なぜ認証が通らないか分かる方はいらっしゃいますでしょうか？

以下がソースコードです。

//set_header.js
import axios from 'axios'

window.addEventListener('beforeunload', function(e){
  axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  axios.defaults.headers.common["X-CSRF-TOKEN"] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');  
  axios.defaults.headers.common['access-token'] = localStorage.getItem("token");
  axios.defaults.headers.common["uid"] = localStorage.getItem("uid");
  axios.defaults.headers.common["client"] = localStorage.getItem("client");
  axios.defaults.headers.common["token-type"] = localStorage.getItem("token-type");
  axios.defaults.headers.common["expiry"] = localStorage.getItem("expiry");
});

#user_controller.rb
class Api::V1::UsersController < ApplicationController
  before_action :authenticate_api_v1_user!
  def index
    
  end
end

色々調べてみたのですが全く動かず。。。
例えば以下の様にurlごとにaxiosを使ってheaderに値を仕込み

    axios
        .get('http://localhost:3000/api/v1/users, {
        headers: { 
          "Content-Type": "application/json" ,
          "access-token": localStorage.getItem("token"),
          "uid":localStorage.getItem("uid"),
          "client":localStorage.getItem("client"),
          "token-type":localStorage.getItem("token-type"),
          "expiry":localStorage.getItem("expiry")
          },
        })

APIを叩くとしっかり認証が通るのでtokenが異なるといったことはなくjs側の書き方や処理に問題があるのだと思います。
ご回答いただけると幸いです。よろしくお願いします。