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

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

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

js 复制代码

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

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

js 复制代码

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

翻了几遍 mdn，只找到几个获取响应头的方法：get、keys、entries，我都试了，没有用

于是，又去问了 ai，ai 的回答如下：

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

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

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

我就想到了跨域的响应头 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 给的信息中，提取出的有用信息是：出于安全考虑，响应头是敏感信息，不允许随意获取

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

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