After creating a Vue app using Axios that was installed via Vue UI dependency installation, I encountered an issue with the post headers returning an undefined token Bearer undefined. To resolve this, I made changes to my main.js file. Initially, I had added a global configuration as follows:
import Vue from "vue";
import "./plugins/vuetify";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import axios from "axios";
Vue.config.productionTip = false;
axios.defaults.baseURL = "http://localhost:3000";
axios.defaults.headers.common["Authorization"] = `Bearer ${localStorage.token}`;
axios.defaults.headers.post["Content-Type"] = "application/json";
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
However, this setup resulted in the error mentioned earlier when attempting to execute the signOut function. To address this issue, I modified the code by removing the line setting the Authorization header and utilizing a different approach:
signOut: async function() {
try {
const request = axios.create({
baseURL: "http://localhost:3000/users/signout"
});
request.defaults.headers.common['Authorization'] = `Bearer ${localStorage.token}`;
const response = await request.post();
// continue functionality
} catch (err) {
// handle errors
}
}
This adjustment successfully resolved the problem with the Authorization header. Now, everything functions as expected. If you are facing a similar issue with the initial setup, consider implementing the revised code snippet provided above to ensure correct header setup.