如何在 axios 中设置全局标头?

Posted

技术标签:

【中文标题】如何在 axios 中设置全局标头?【英文标题】:How does one set global headers in axios? 【发布时间】:2017-05-01 00:49:48 【问题描述】:

嗨,我在请求拦截器中设置了默认的 axios 标头,但是这些标头无法在另一个函数中访问...在 axios axios documentation 中提到 global-axios-defaults 是全局的...下面是我的示例代码需要帮助

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 默认标头

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
    
  )

【问题讨论】:

我认为这是因为 axios.default 行在组件挂载后可能不会执行。 【参考方案1】:

您可以为每个 XHR 调用设置默认的 Axios 中的自定义标头,如下所示:

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';
查看全局选项here (Request Config)

此外,您可以创建传递给实例的配置。

查看更多:here (Axios Create Config)

【讨论】:

【参考方案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);
  
);

【讨论】:

以上是关于如何在 axios 中设置全局标头?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 NuxtJS 中设置全局 $axios 标头

在 Vue 3 中设置全局 Axios 标头

如何在 Angular2 中设置全局自定义标头?

在 axios 中设置授权标头

通过 axios 在响应本机和 Web 上的标头中设置不同的 Content-Type

如何在反应中设置来自axios的响应状态