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 给的信息中,提取出的有用信息是:出于安全考虑,响应头是敏感信息,不允许随意获取

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

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

相关推荐
用户99045017780099 分钟前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家12 分钟前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞1 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636021 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军1 小时前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句1 小时前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜1 小时前
CommonJS与ESM
前端·javascript