ReactJS中Axios如何在Post请求后、Get请求前设置请求头？

我正在使用Axios和ReactJS，尝试将登录Post请求获取到的token设置为Authorization请求头，用于后续的Get请求。但在Chrome控制台的网络面板中发现，Get请求并未携带该请求头。我最初尝试了Promise链式调用，未能成功设置请求头，为了可读性改用async/await重写代码。这是否是ReactJS处理请求与函数的顺序问题？

代码如下：

const handleLoginSubmit = async () => {
    try {
        const response = await axios.post(LOGIN_API_URL, {
                                        'email': email, 
                                        'password': password,}
                                    );
        console.log(response);
        
        //Set local storage token and axios authorization common header
        const token = response.data.key;
        localStorage.setItem('token', token);
        axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

        const response2 = await axios.get(USER_API_URL);
        setUsername(response2.data.display_name);   
    } catch (e) {
        console.log(e);
    }
}

• 核对token格式与后端要求：部分后端要求的授权头格式是Token ${token}而非Bearer ${token}，先通过console.log(token)确认拿到的token值有效，再匹配后端文档的授权头规则。

• 直接给Get请求显式配置请求头：避免依赖axios.defaults.headers的全局设置（虽理论上async/await是顺序执行，但个别场景下全局配置可能存在覆盖或延迟），直接在Get请求中指定headers：

const response2 = await axios.get(USER_API_URL, {
  headers: {
    'Authorization': `Bearer ${token}`
  }
});

• 检查Axios请求拦截器：如果项目配置了请求拦截器，确认没有拦截器修改或清空Authorization头的逻辑，比如：

axios.interceptors.request.use(config => {
  // 排查此处是否有重置headers的代码
  return config;
});

• 确认跨域场景的后端配置：如果是跨域请求，后端必须在响应头中设置Access-Control-Allow-Headers: Authorization，否则浏览器会自动过滤该自定义请求头（这种情况通常会在控制台出现跨域错误日志）。

• 验证localStorage存储状态：添加console.log(localStorage.getItem('token'))，确认token被正确存入本地存储，排除存储失败导致的请求头无值问题。

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