HTTP Header 怎么看？缓存、安全、CORS 和 Content-Type 排查指南

网页打开慢、接口跨域、图片下载成奇怪文件、CDN 缓存不生效，很多时候答案都在 HTTP Header 里。Header 不显眼，但它决定浏览器怎么处理响应。

这篇讲常见 Header 怎么看，可以配合 HTTP Header 解析器 检查请求头和响应头。

Content-Type 决定内容类型

Content-Type 告诉浏览器响应是什么类型：

Content-Type: text/html; charset=utf-8
Content-Type: application/json
Content-Type: image/webp

如果 JSON 接口返回了 text/html，前端解析可能失败。如果 SVG、WebP、字体文件类型错了，浏览器也可能拒绝或错误处理。

Cache-Control 决定缓存策略

常见响应头：

Cache-Control: public, max-age=31536000, immutable

适合带 hash 的静态资源，比如 app.abc123.js。

HTML 页面通常不应该长期强缓存，否则更新后用户可能看不到新内容。你可以用 Cache-Control 生成器 先生成适合静态资源或页面的策略。

CORS 相关 Header

跨域常见：

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Authorization, Content-Type

如果浏览器报 CORS 错误，可以先看 Network 里的 OPTIONS 和实际响应头。需要生成配置时，可以配合 CORS Header 生成器。

安全响应头

常见安全头：

• Content-Security-Policy
• X-Frame-Options
• Referrer-Policy
• Permissions-Policy
• Strict-Transport-Security

它们可以减少 XSS、点击劫持、隐私泄露等风险。不同网站需要不同策略，不建议直接复制一大段未知配置。

如果要配置 CSP，可以先用 CSP 安全头生成器 做草稿。

排查顺序

遇到 Header 相关问题，可以按这个顺序：

1. 打开浏览器 DevTools 的 Network。
2. 找到具体请求。
3. 看 Status Code。
4. 看 Response Headers。
5. 对照 Content-Type、Cache-Control、CORS、安全头。
6. 如果经过 CDN，确认源站和 CDN 是否返回不同 Header。

CDN 很可能改写或覆盖 Header，所以不要只看源站。

总结

HTTP Header 是浏览器和服务器之间的说明书。缓存、跨域、内容类型、安全策略都能从这里找到线索。

排查时可以把 Header 复制到 HTTP Header 解析器，再根据问题分别使用 Cache-Control、CORS 或 CSP 工具生成配置。