vue中设置全局请求头，并判段地址为/my为设置请求头

Posted 2023-03-09

参考技术A axios.interceptors.request.use(function (config) 

  // 在发送请求之前做些什么

  console.log(config)

  // config.url.startsWith('/my')  判断地址是否为/my

  if (config.url.startsWith('/my')) 

    config.headers.Authorization = store.state.token

  

  return config

)

响应拦截，判断假token，并做出反应

// 添加响应拦截器

axios.interceptors.response.use(

  function (response) 

    // 对响应数据做点什么

    return response

  ,

  function (error) 

    // 对响应错误做点什么

    if (error.response.status === 401) 

      store.commit('getToken', '')

      router.push('/login')

    

    return Promise.reject(error)

  

)

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

嗨，我在请求拦截器中设置默认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
    }
  })
}

答案

您可以为每个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)