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

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

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

相关推荐
求知摆渡3 分钟前
从零开始搭建typecho
前端·后端
极客悟道4 分钟前
彻底搞懂Java值传递:90%开发者都会踩的坑
前端·后端
Mintopia14 分钟前
计算机图形学中的毛发与布料模拟:让虚拟世界动起来的魔法
前端·javascript·计算机图形学
小飞悟17 分钟前
组件通信的艺术:从 props 钻井到 context 共享的进化之路
前端·javascript·设计模式
Mintopia18 分钟前
Three.js 中正切函数在相机视野里的那些事儿
前端·javascript·three.js
Dream耀20 分钟前
掌握React useContext:轻量级状态共享与性能优化指南
前端·javascript·react.js
十盒半价21 分钟前
Stylus 伪元素:让 CSS 玩出 “无中生有” 的新花样
前端·css·trae
红衣信22 分钟前
React 中 useContext 的使用与状态共享详解
前端·react.js·面试
断竿散人22 分钟前
JavaScript 事件系统完全指南:从事件流原理到现代化事件处理实战
前端·javascript