怎么通过HTML的Fetch的response.headers获取服务端返回的Content-Type等头信息-html教程-PHP中文网

response.headers.get('content-type')是唯一正确读取方式，因headers对象不可枚举且属性只读；需注意跨域白名单、charset处理及调试时需用foreach或fromentries查看内容。

怎么通过html的fetch的response.headers获取服务端返回的content-type等头信息

response.headers.get() 是唯一能读取 Content-Type 的方式

Fetch 的 response.headers 是一个 Headers 对象，不是普通对象，不能用 response.headers['Content-Type'] 或 response.headers.Content-Type 访问。必须调用其内置方法。

常见错误是直接解构或用方括号取值，结果得到 undefined —— 因为 Headers 对象的属性是只读且不可枚举的。

正确写法：response.headers.get('Content-Type')（注意大小写不敏感，但建议按标准写法）
如果头不存在，返回 null，不是 undefined，判断时建议用 === null 或直接布尔判断（空字符串也会转为 true，但 null 是 falsy）
想获取所有头？用 response.headers.entries() 或 response.headers.forEach()，但浏览器控制台里 console.log(response.headers) 默认不展开内容，容易误以为“没东西”

Content-Type 值可能带 charset 参数，解析前要小心切分

服务端返回的 Content-Type 很可能是 application/json; charset=utf-8 或 text/html; charset=gbk。直接拿整个字符串做 MIME 类型判断会出错。

提取主类型推荐用：response.headers.get('Content-Type')?.split(';')[0].trim()
不要用 .includes('json') 粗暴匹配，万一服务端返回 application/vnd.api+json 就漏判了
如果后续要手动解析 JSON，其实不用自己 check Content-Type —— response.json() 内部已校验，失败时抛错信息里会含 “invalid JSON” 而非头错误

跨域响应中，部分 header 默认不可访问

浏览器出于安全限制，对跨域响应的 header 有白名单：只有 Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma 这几个是默认暴露的。其他如 X-Request-ID、Set-Cookie、自定义头，fetch 拿不到。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

服务端必须显式设置 Access-Control-Expose-Headers: X-Request-ID, Content-Disposition，前端才能用 response.headers.get('X-Request-ID')
Content-Type 在白名单里，所以一般能读到；但如果服务端没配 CORS，连整个 response 都会被浏览器拦截，根本进不了 then() 回调
本地开发时用 localhost:3000 调 localhost:8000 就算跨域，别被“都是 localhost”误导

调试时 headers 看不见？用 response.headers.forEach 打印全量

Chrome/Firefox 控制台里 console.log(response.headers) 只显示 Headers {}，看不出内容。得主动遍历。

response.headers.forEach((value, name) => {
  console.log(`${name}: ${value}`);
});

或者更紧凑地转成对象看：

Object.fromEntries([...response.headers])

注意：[...response.headers] 返回的是 [key, value] 二元数组，不是纯 key 数组，别漏了解构。

真正容易被忽略的是：header 名在 forEach 回调里是小写的（如 content-type），但 get() 方法对大小写不敏感；另外，某些代理或 CDN 可能会删掉或重写 Content-Type，真遇到读不到，先抓包确认服务端实际发了什么。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！