RTK Query 无法读取响应Authorization头部该如何解决？

问题根因 #

这个现象是CORS响应头访问限制导致的，和RTK Query本身的实现无关：

• 跨域请求场景下，浏览器默认仅允许JS访问以下基础响应头：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma
• 其余自定义头部（包括你需要的Authorization）必须由后端在响应头中配置Access-Control-Expose-Headers，显式声明允许前端访问，否则JS侧无法读取，即使网络面板中能看到该响应头也会被浏览器拦截。

解决方案 #

1. 后端侧配置（必须修改）

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

Access-Control-Expose-Headers: Authorization

如果有多个需要暴露的头部，用逗号分隔即可：

Access-Control-Expose-Headers: Authorization, X-Custom-Header

2. 前端侧验证

后端配置完成后，你原有读取头部的代码可以直接正常使用，Headers对象的get方法对大小写不敏感，以下两种写法都生效：

const authHeader1 = headers.get('authorization');
const authHeader2 = headers.get('Authorization');

拿到头部后按原有逻辑提取token存储即可。

特殊场景排查 #

如果后端已经配置了该字段还是读取不到，可以检查两个点：

• 开发环境使用本地代理转发请求的情况：确认代理工具（vite代理、webpack代理等）没有过滤掉Authorization和Access-Control-Expose-Headers头，需要配置代理透传指定响应头。
• 检查登录接口的响应头是否把Access-Control-Expose-Headers配置到了正确的接口路径，不要只配置在全局OPTIONS预检请求上。

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