How does one set global headers in axios?

2020-06-07 07:49发布

问题:

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
    }
  })
}

回答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)