React中axios获取响应头无Authorization但Network面板存在该字段求助

问题根因 #

1. withCredentials配置位置错误
   你当前把withCredentials: true写在了headers配置项内，这个参数是axios的顶层请求配置，不属于请求头字段，放在headers里不会生效。如果接口是跨域请求，withCredentials不生效会导致前端无法正确读取跨域返回的自定义响应头。
2. 跨域场景下后端未配置响应头暴露规则
   默认CORS策略下，前端JavaScript只能读取以下6个基础响应头：

• Cache-Control
• Content-Language
• Content-Type
• Expires
• Last-Modified
• Pragma
  Authorization属于自定义响应头，必须由后端在响应头中添加Access-Control-Expose-Headers: Authorization，才能被前端axios读取到，这就是为什么Network面板能看到头字段，但axios的response里拿不到的核心原因。

解决方案 #

第一步：修正axios请求配置 #

把withCredentials从headers中移到顶层配置项：

let res = await axios.post(
    `http://xx.xx/api/v1/users/login`,
    {
        id: email,
        password: encryptedPassword,
    },
    {
        // 注意withCredentials是顶层配置，和headers平级
        withCredentials: true,
        headers: {
            Accept: 'application/json',
            'Content-type': 'application/json',
        },
    },
)

第二步：后端添加跨域暴露配置 #

需要后端接口在响应头中添加如下配置：

Access-Control-Expose-Headers: Authorization

不同后端框架可以直接搜索对应框架的CORS配置方法，把Authorization加入暴露头列表即可生效。

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