fetch/axios/ajax 发起的请求如何获取响应头

最近遇到了一个问题,在翻遍文档和询问 ai 后依然无法解决时,我是如何一步步解决的

事情是这样的:后端接口某个数据放在了响应头中,但是在 js 获取不到这个响应头,一直返回 null

js 复制代码
fetch().then((response) => {
  const xx = response.headers.get("X-My-Custom-Header"); // 获取不到
});

我只能获取到 content-typecontent-length 这两个响应头,其他的一个也获取不到

js 复制代码
fetch().then((response) => {
  const contentType = response.headers.get("Content-Type"); // 可以获取到
  const contentLength = response.headers.get("Content-Length"); // 可以获取到
});

翻了几遍 mdn,只找到几个获取响应头的方法:getkeysentries,我都试了,没有用

于是,又去问了 aiai 的回答如下:

看到这回复,说了等于没说一样

不过,转念一想,它说响应头是敏感信息,不允许随意获取,那有什么办法可以安全的获取响应头呢?

安全访问,跨域不就是安全访问么

我就想到了跨域的响应头 Access-Control-Allow-Origin 等几个,那获取响应头是不是也和他们有关

于是我就去翻了 Access-Control-Allow-Origin 的文档

Access-Control-Allow-Origin 文档中没找到有用的信息,不过我被左边几个 Access-xxx-Headers 的响应头吸引了

于是,我就把这几个 Access-xxx-Headers 的响应头都点开看了下,当点到 Access-Control-Expose-Headers 时,看到了这句话:

这不就是我一直想要找到信息吗

马上就把这个响应头给加上,然后问题就成功解决了

js 复制代码
fetch().then((response) => {
  const xxx = response.headers.get("X-My-Custom-Header"); // 可以获取了
});

原因

浏览器为了防止跨域获取资源,做了很多安全设置,获取响应头也是其中之一

使用 Access-Control-Expose-Headers 这个响应头的前提是,跨域没有问题,也就是 Access-Control-Allow-Origin 这个响应头已经配置好了,然后在配置 Access-Control-Expose-Headers 这个响应头,就可以安全的获取响应头了

如果设置为 Access-Control-Expose-Origin: *,表示所有影响头都可以获取

如果设置为 Access-Control-Expose-Origin: X-My-Custom-Header, X-Another-Custom-Header,表示只有 X-My-Custom-Header, X-Another-Custom-Header 这个两个响应头可以获取

现在你可以获取到的响应头是:

  • Content-Type
  • Content-Length
  • X-My-Custom-Header
  • X-Another-Custom-Header

总结

ai 给的信息不一定对,自己要有提取信息的能力

比如:我从 ai 给的信息中,提取出的有用信息是:出于安全考虑,响应头是敏感信息,不允许随意获取

然后就从【安全获取】这块去查找相关的信息

最后,解决问题前要先提取有用的信息,然后再去查找相关的文档,这样效率会高很多

相关推荐
然我2 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子7 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹10 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器17 分钟前
指定阿里镜像原理
前端
枷锁—sha22 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha23 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜39 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss