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

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

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

相关推荐
华仔啊5 分钟前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
江城开朗的豌豆13 分钟前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
vivo互联网技术21 分钟前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js
江城开朗的豌豆29 分钟前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
会飞的青蛙35 分钟前
GIT 配置别名&脚本自动化执行
前端·git
再吃一根胡萝卜37 分钟前
🔍 当 `<a-menu>` 遇上 `<template>`:一个容易忽视的菜单渲染陷阱
前端
Asort1 小时前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
无双_Joney1 小时前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥1 小时前
前端必学的 CSS Grid 布局体系
前端·css