Nuxt, Vue, RefreshToken => Uncaught (in promise) TypeError: Cannot read property 'protocol' of undefined => Axios plugin, Axios Interceptors - vuejs2

Question

my goal is to refresh the token after catching the 401 status code and the "token expired" message in my interceptor on the response ...
What are they doing wrong?
I'm using nuxt, vue, axios. Please help!
Uncaught (in promise) TypeError: Cannot read property 'protocol' of
undefined
it sends me back to that code:
#/plugins/axios.js:
import Vue from 'vue';
import axios from 'axios';
axios.interceptors.response.use((response) => {
console.debug("AXIOS.JS plugin => response: ", response);
return response;
}, function (error) {
console.debug("AXIOS.JS plugin => error: ", error);
return Promise.reject(error);
});
Vue.use(axios);
package.json:
{
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"#nuxtjs/axios": "^5.13.1",
"#nuxtjs/composition-api": "^0.24.7",
"#nuxtjs/dotenv": "^1.4.1",
"#nuxtjs/proxy": "^2.1.0",
"#nuxtjs/pwa": "^3.3.5",
"#vue/composition-api": "^1.0.0-rc.13",
"core-js": "^3.9.1",
"nuxt": "^2.15.6",
"vue-multiselect": "^2.1.6",
"vue2-datepicker": "^3.9.1"
},
"devDependencies": {
"#nuxtjs/tailwindcss": "^4.1.2",
"autoprefixer": "^10.2.5",
"postcss": "^8.3.0",
"tailwindcss": "^2.1.2"
}
}
nuxt.config.js
const routes = require('./routes/index.js')
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'Fokser',
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' }
],
script: [
{
//src: "https://skrypt-cookies.pl/id/d6458d5064c23515.js",
//src: "https://skrypt-cookies.pl/id/69205d8cab854dc2.js",
body: true,
},
],
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
'#/static/css/styles.css',
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
{
src: "#/plugins/filters.js",
src: "#/plugins/axios.js",
}
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/tailwindcss
'#nuxtjs/tailwindcss',
'#nuxtjs/composition-api/module'
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
'#nuxtjs/axios',
// https://go.nuxtjs.dev/pwa
'#nuxtjs/pwa',
'#nuxtjs/proxy',
'#nuxtjs/dotenv'
],
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
proxy: true
},
// PWA module configuration: https://go.nuxtjs.dev/pwa
pwa: {
manifest: {
lang: 'en'
}
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
},
proxy: {
'/api/': {
target: process.env.VUE_APP_ROOT_API,
pathRewrite: { '^/api': '' }
}
},
router: {
extendRoutes(nuxtRoutes, resolve) {
routes.forEach((route) => {
nuxtRoutes.push({
name: route.name,
path: route.path,
component: resolve(__dirname, route.component)
})
})
}
}
}
This occurs at main page (localhost):
besides, I am making a request to api like:
loadUserInfo({ commit }) {
let token = localStorage.getItem("auth_token");
let userId = localStorage.getItem("id");
commit("setUserToken", token);
commit("setUserId", userId);
if (userId && token) {
this.$axios.get(`api/accounts/userName/${userId}`)
.then((res) => {
if (res.status === 200) {
commit("setUserName", res.data.userName);
}
})
.catch(err => {
console.debug("[authorize.js LoadUserInfo], errors: ", err);
})
}
},
async getRecords({commit}, request) {
let config = {
params: {
recordType: request.recordType,
limit: limit
},
}
return await this.$axios.get(`/api/records/getRecords`, config);
}
loadAll({ commit }, request) {
this.$axios.get(`/api/records/all`, request)
.then((res) => {
if (res.status === 200) {
commit('setRecords', res.data);
}
});
},
I don't know where is the problem... :(