How does one set global headers in axios? - http

Question

Hi I'm setting default axios headers in request interceptor but these headers are not accessible in another function... in axios axios documentation it is mentioned that global-axios-defaults are global...below is my sample code need help
axios.interceptors.request.use(function (config) {
axios.defaults.headers.accesstoken= "some_access_token"
axios.defaults.headers.client = "some_client"
axios.defaults.headers.uid = "some_uid"
return config;
},function (error) {
return Promise.reject(error);
});
On page load componentDidmount executes but axios default headers are undefined in this function
componentDidMount: function() {
console.log(axios.defaults.headers) #its giving me undefined
axios.get("http://some_url_for_get_request.json", {
headers: {
accesstoken: axios.defaults.headers.accesstoken,
uid: axios.defaults.headers.uid,
client: axios.defaults.headers.client
}
})
}

Answer 1

You can set the default Custom Headers in Axios for every XHR call like this:
axios.defaults.headers.common = {
"X-Requested-With": "XMLHttpRequest",
"X-CSRFToken": "example-of-custom-header"
};
You can also add configurations onward like this:
window.axios.defaults.headers.post['xsrfCookieName'] = 'CSRFToken';
window.axios.defaults.headers.post['xsrfHeaderName'] = 'X-CSRFToken';
window.axios.defaults.headers.post['responseType'] = 'json';
window.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
See the global options here (Request Config)
Also, you can create a configuration passed into an instance.
See more: here (Axios Create Config)

Answer 2

on your MAIN.JS
import axios from "axios";
const base = axios.create({
baseURL: "http://127.0.0.1:8000/",
});
Vue.prototype.$http = base;
Vue.prototype.$http.interceptors.request.use(
config => {
let accessToken = localStorage.getItem('token');
if (accessToken) {
config.headers = Object.assign({
Authorization: `Bearer ${accessToken}`
}, config.headers);
}
return config;
},
error => {
return Promise.reject(error);
}
);