使用axios无法获取x-request-id响应头的问题咨询

问题原因 #

默认 CORS 策略限制了前端 JavaScript 可读取的响应头范围，仅能获取以下6个基础响应头：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，其余所有自定义响应头都需要服务端额外配置暴露，才能被前端读取。

你当前的配置错误在于：Access-Control-Allow-Headers 是用来控制前端允许发送的自定义请求头，和响应头的读取权限无关。从你给出的完整响应头可以看到，当前Access-Control-Expose-Headers仅配置了Total,Total-Pages，所以X-Request-Id不在可读取范围内，自然拿不到。

解决方案 #

服务端修改Access-Control-Expose-Headers配置，将X-Request-Id追加到配置值中，修改后完整值为：

access-control-expose-headers: Total,Total-Pages,X-Request-Id

配置生效后，无需修改前端 axios 代码，直接通过以下方式即可读取对应值：

console.log(res.headers['x-request-id'])

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