如何在axios中设置全局头部？

Question

嗨，我在请求拦截器中设置了默认的axios头部，但是这些头部在另一个axios函数中无法访问... 在axios文档中提到全局的axios默认值是全局的...下面是我的示例代码，需要帮助。

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

页面加载时，componentDidMount会执行，但在此函数中axios的默认headers未定义。

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

- code.king

---

我认为这是因为axios.default行可能在组件挂载后没有执行。 - Zeel Shah

Answer 1

你可以像这样设置默认的Axios自定义请求头，以便为每个XHR调用：

axios.defaults.headers.common = {
  "X-Requested-With": "XMLHttpRequest",
  "X-CSRFToken": "example-of-custom-header"
};

您也可以像这样添加配置:

  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';

• 查看全局选项这里（请求配置）

此外，您可以创建传递到实例中的配置。

• 了解更多信息：这里（Axios Create 配置）

- JREAM

Answer 2

在你的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);
  }
);

- Mohamed Raza