javascript - 如何使用 Axios 拦截器向响应添加一些标头?
问题描述
在我的 Reactjs 应用程序中,我想添加一个拦截器,它可以将一些标头附加到一些后端响应
所以,我尝试了这个:
export default function App() {
axios.interceptors.response.use(
(config)=> {
config.headers['myheader'] = 'myvalue'; // <-- THIS IS MY CUSTOM HEADERS
return config;
},
(error) => {
// ON ERREOR
})
......
);
而且我想这样我的标头将附加在每个后端响应中。但这似乎不起作用。
建议??
解决方案
添加请求拦截器
axios.interceptors.request.use(
config => {
const token = localStorage.getItem('auth_token');
if (token) {
config.headers['Authorization'] = 'Bearer ' + token;
}
config.headers['Content-Type'] = 'application/json';
return config;
},
error => {
Promise.reject(error)
});
添加响应拦截器
axios.interceptors.response.use((response) => { // block to handle success case
return response
}, function (error) { // block to handle error case
const originalRequest = error.config;
if (error.response.status === 401 && originalRequest.url ===
'http://dummydomain.com/auth/token') { // Added this condition to avoid infinite loop
// Redirect to any unauthorised route to avoid infinite loop...
return Promise.reject(error);
}
if (error.response.status === 401 && !originalRequest._retry) { // Code inside this block will refresh the auth token
originalRequest._retry = true;
const refreshToken = 'xxxxxxxxxx'; // Write the logic or call here the function which is having the login to refresh the token.
return axios.post('/auth/token',
{
"refresh_token": refreshToken
})
.then(res => {
if (res.status === 201) {
localStorage.setItem('auth_token',res.data);
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('auth_token');
return axios(originalRequest);
}
})
}
return Promise.reject(error);
});
单击此处以详细查看该主题。
推荐阅读
- javascript - react native 如何根据条件在不同组件之间导航
- reactjs - 尝试使用 export * 语法时 ESLint、React/TS 出现问题
- angular - Angular 的动态 base-href
- python - 无法在 Python 中读取和加载 JSON 文件,JSON 格式不同
- python - 检查点是否在点列表中的高效方法
- c# - 如何为输入字段赋值?
- php - Yii2 Active Query的“选择操作”中可以调用反序列化函数吗
- ios - 问题 ITMS-90809:Firebase 项目中已弃用的 API 使用(Cordova 插件)
- apache-kafka - 为什么我的消费者控制台不与我的文本文件同步?
- matlab - 在 MATLAB 2019b 中使用 set 命令后如何命名停靠的图形窗口