axios 动态设置默认标头答案

【问题标题】：axios set default headers dynamicallyaxios 动态设置默认标头
【发布时间】：2018-04-11 17:27:42
【问题描述】：

我想设置一个随每个请求发送的标头：

axios.defaults.headers.common = {
    Accept: 'application/json',
    'X-CSRF-TOKEN': store.state.csrf
};

这仅在页面加载时进行评估。我希望它是动态的，因为 csrf 值以后可能会改变。比如：

axios.defaults.headers.common = {
    Accept: 'application/json',
    'X-CSRF-TOKEN': () => store.state.csrf
};

但是这不起作用。

【问题讨论】：

标签： javascript axios

【解决方案1】：

您可以随时覆盖/扩展默认设置：

// set defaults...

// do requests...

// overwrite CSRF token
axios.defaults.headers.common['X-CSRF-TOKEN'] = store.state.csrf;

// do more requests...

或者你可以change the defaults only for a certain instance。

【讨论】：

【解决方案2】：

我建议您在这样发送请求之前在拦截器中执行此操作：

axios.interceptors.request.use(function (config) {
    config.headers.common = {...config.headers.common, "X-CSRF-TOKEN": () => store.state.csrf}
    return config;
}, function (error) {
    // Do something with request error
    logger.error(error);
    return Promise.reject(error);
  });

【讨论】：

【解决方案3】：

您可以在请求数据后传递动态标头作为参数。

     let config = {
         'X-CSRF-TOKEN': store.state.csrf
     }
     axios.post(url, requestData, config)

【讨论】：