"Encountering an issue with adjusting axios default headers on a global scale in

Question

"Encountering an issue with adjusting axios default headers on a global scale in

In main.js

import axios from 'axios';

axios.defaults.headers.common = {
    'Authorization': 'JWT ' + Vue.auth.getToken()
};

axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //TODO: ensure the trailing slash is appended

// Add modified axios instance to Vue prototype so that it is available globally via Vue instance
Vue.prototype.$http = axios;

Everything was working fine until this point. (I could successfully log in and store the token)

However, I have encountered an issue with another component that fetches a list of users from the server through an ajax call in the component's created() lifecycle hook. The problem arises when I try to access this.$http within the component - I receive a 401 error response from the server because the Authorization header is not included in the request headers, despite having pre-configured axios.defaults.headers.common.

What's strange is that if I manually refresh the page, the token is correctly attached to the request header and the user list is successfully retrieved**.**

Could someone please provide an explanation for why this behavior is occurring?

javascript vue.js vuejs2 axios

Answer 1

Answer №1

One way to globally add headers to your axios requests is by utilizing request interceptors.

axios.interceptors.request.use(function (config) {
// Perform actions before sending the request
  return config;
}, function (error) {
// Handle request error
   return Promise.reject(error);
});

You can access and modify request headers using config.headers. To set headers for the request, you can use the following syntax:

config.headers = {
   'Authorization': 'JWT ' + Vue.auth.getToken()
}

For more information on axios, visit this link.

Answer 2

One way to globally add headers to your axios requests is by utilizing request interceptors.

axios.interceptors.request.use(function (config) {
// Perform actions before sending the request
  return config;
}, function (error) {
// Handle request error
   return Promise.reject(error);
});

You can access and modify request headers using config.headers. To set headers for the request, you can use the following syntax:

config.headers = {
   'Authorization': 'JWT ' + Vue.auth.getToken()
}

For more information on axios, visit this link.

Answer 3

Answer №2

If you want to consistently add custom headers to your HTTP requests throughout your application, consider creating a global class for handling this functionality.

import axios from 'axios';

/**
 * A wrapper around the axios library that sets a base URL and authentication headers by default
 */
class CustomAxios {
    constructor(baseUrl, bearerToken) {

        return axios.create({
            baseURL: baseUrl,
            headers: {
                Authorization: `Bearer ${bearerToken}`
            }
        });
    }
}

export default CustomAxios;

To use this class in your main app file:

import { CustomAxios } from 'my/custom-class'


const myService = new CustomAxios('baseURL', 'bearerToken');

Answer 4

If you want to consistently add custom headers to your HTTP requests throughout your application, consider creating a global class for handling this functionality.

import axios from 'axios';

/**
 * A wrapper around the axios library that sets a base URL and authentication headers by default
 */
class CustomAxios {
    constructor(baseUrl, bearerToken) {

        return axios.create({
            baseURL: baseUrl,
            headers: {
                Authorization: `Bearer ${bearerToken}`
            }
        });
    }
}

export default CustomAxios;

To use this class in your main app file:

import { CustomAxios } from 'my/custom-class'


const myService = new CustomAxios('baseURL', 'bearerToken');

Answer 5

Answer №3

Have you experimented with utilizing asios.create method?

http/index.js:

import axios from 'axios'
import env from '../config/env'
import store from '../store'

export default (() =>
  axios.create({
    baseURL: env.API_HOST,
    headers: {
      common: {
        Authorization: store.getters['user/getAuthToken']
      }
    }
  }))()

main.js:

import http from './http'

Vue.prototype.$http = http

In addition, I utilize a store action to update the axios client:

updateHTTPClientAuthToken () {
  Vue.prototype.$http.defaults.headers.common.Authorization = this.getters.getAuthToken
}

Answer 6

Have you experimented with utilizing asios.create method?

http/index.js:

import axios from 'axios'
import env from '../config/env'
import store from '../store'

export default (() =>
  axios.create({
    baseURL: env.API_HOST,
    headers: {
      common: {
        Authorization: store.getters['user/getAuthToken']
      }
    }
  }))()

main.js:

import http from './http'

Vue.prototype.$http = http

In addition, I utilize a store action to update the axios client:

updateHTTPClientAuthToken () {
  Vue.prototype.$http.defaults.headers.common.Authorization = this.getters.getAuthToken
}

"Encountering an issue with adjusting axios default headers on a global scale in

Answer №1

Answer №2

Answer №3

Similar questions

next.js users may encounter a problem with react-table not rendering correctly

What is an alternative way to retrieve the page title when the document.title is unavailable?

What are some strategies for enhancing the performance of a React application that contains numerous text input fields (implemented using Hooks) within a form?

Incorporating the Acts_as_votable gem alongside Angularjs for interactive voting functionality

Is there a way to navigate to a particular route from a child component using the beforeEnter guard?

The response body in Express is returned as a ReadableStream instead of the typical JSON format

Should I consolidate my ajax requests into groups, or should I send each request individually?

Tips for universally updating the FormData TypeScript interface within React Native applications

When the position value in three.js exceeds a certain threshold, the mesh starts to jitter uncontrollably

What is the most effective way to loop and render elements within JSX?

Securing Routes with Firebase User Authentication in ReactJS

Customizing the color of text in the fillText() function on an HTML5 <canvas>

Error in the delete function on a JSF webpage

What is the best way to incorporate spacing between rows in material UI and React?

JQuery isn't functioning properly on dynamically generated divs from JavaScript

The 'hide' property is not recognized on this type during the build process

What is the best way to retrieve this value using javascript?

A comparison of parent and child components

The Bcrypt hashed password does not match the password hash stored in Mongodb

Unleashing the power of Vuex with promise chaining