0

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): enter image description here

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... :(

Phil
  • 157,677
  • 23
  • 242
  • 245
TheBatman94
  • 1,049
  • 2
  • 6
  • 9
  • 1
    Does this answer your question? [Uncaught (in promise) TypeError: Cannot read property 'protocol' of undefined](https://stackoverflow.com/questions/64235943/uncaught-in-promise-typeerror-cannot-read-property-protocol-of-undefined) – Phil Jul 18 '21 at 14:01
  • 2
    `Vue.use(axios);` y tho? See https://axios.nuxtjs.org/helpers/ – Phil Jul 18 '21 at 14:01
  • 1
    You're registering two different instances of axios btw. The Nuxtjs Axios module registers one and you're using a plugin file to register another. – Braks Jul 18 '21 at 14:55
  • 1
    What @Braks said. It may or may not be related to your error, but I’d recommend taking a look at the nuxt axios docs and copy their example for the interceptor plug-in. https://axios.nuxtjs.org/helpers/ – Nick Dawes Jul 18 '21 at 14:58
  • Thank You so much, Homies! You were right as always: https://axios.nuxtjs.org/extend/ And work great :) – TheBatman94 Jul 18 '21 at 21:19

0 Answers0