如何用Axios从响应头获取Authorization Bearer Token并存入Redux Store

可能的原因及解决办法 #

1. 响应头键名大小写问题 #

Axios在处理响应头时，会自动将键名转为小写，你尝试用response.headers['Authorization']可能拿不到数据，改成小写的authorization即可：

const token = response.headers['authorization'];

2. 跨域场景下的CORS暴露头限制 #

如果前端和后端属于跨域部署，浏览器默认仅允许前端获取Cache-Control、Content-Language、Content-Type等少数响应头。要读取Authorization头，后端必须在响应中添加Access-Control-Expose-Headers字段，明确允许暴露该头：
以Node.js/Express后端为例，需要添加如下代码：

res.header('Access-Control-Expose-Headers', 'Authorization');

配置后前端才能正常读取到该响应头。

确认Token获取后的Redux存储逻辑 #

成功拿到Token后，需确保Redux的action和reducer逻辑正确：
示例action creator：

export const userToken = (token) => ({
  type: 'SET_USER_TOKEN',
  payload: token
});

对应reducer：

const initialState = {
  token: null
};

export const authReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'SET_USER_TOKEN':
      return { ...state, token: action.payload };
    default:
      return state;
  }
};

完整修正后的登录代码示例 #

const onLogin = async () => {
  try {
    const response = await axiosInstance.post('/api/auth/login', userData);
    // 使用小写的authorization键名
    const token = response.headers['authorization'];
    if (token) {
      // 若Token格式为Bearer xxx，提取纯Token内容
      const pureToken = token.replace('Bearer ', '');
      dispatch(userToken(pureToken));
      push('/');
    } else {
      console.log('未在响应头中找到Token');
    }
  } catch (error: any) {
    console.log('Login Error', error.message);
  }
};

内容的提问来源于stack exchange，提问作者Oliver