HTTP Header 解析与生成工具

HTTP Header（HTTP 头字段）是 HTTP 请求与响应中键值对形式的元数据， 描述报文的发送方、接收方、主体内容、缓存策略、安全策略等信息。格式为 name: value（冒号后空格可选）。
名称大小写不敏感：Content-Type、content-type、 CONTENT-TYPE 在 HTTP 协议层完全等价。RFC 9110 仅约定首字母大写习惯， 实际由各框架/服务器自行规范。但值是大小写敏感的（如 MIME 类型 application/json 必须小写）。
名称字符集限制：RFC 9110 仅允许可见 ASCII（0x21-0x7e），且不含冒号。 值可包含任意字符（含中文、Emoji），但需符合 obs-text 规范。生产环境建议 Header 值用 ASCII， 非 ASCII 内容放入主体。

HTTP Header 按出现位置分四大类：
1. 请求头（Request Headers）：仅出现在 HTTP 请求中，描述客户端信息与期望。 典型：Host、User-Agent、Accept、Authorization、 Cookie、Referer、Origin。
2. 响应头（Response Headers）：仅出现在 HTTP 响应中，描述服务器与响应信息。 典型：Server、Set-Cookie、Location、WWW-Authenticate、 ETag、Content-Disposition。
3. 通用头（General Headers）：请求与响应都可出现，描述报文整体。 典型：Date、Connection、Via、Transfer-Encoding。
4. 表示头（Representation Headers）：描述主体内容（HTTP/1.1 概念，HTTP/2+ 已合并）。 典型：Content-Type、Content-Length、Content-Encoding。 本工具额外划分 CORS（跨域）、安全（CSP/HSTS 等）、 缓存（Cache-Control/ETag 等）三个语义子类，便于查找。

Cookie 是请求头，浏览器自动携带同域 Cookie 到服务端，格式 Cookie: name1=value1; name2=value2（分号空格分隔）。
Set-Cookie 是响应头，服务端设置 Cookie，一个响应可含多条 Set-Cookie （其他 Header 通常合并为逗号分隔，但 Set-Cookie 例外）。属性： Path（路径）、Domain（域）、Max-Age（秒，优先于 Expires）、 HttpOnly（防 JS 读取，防 XSS 窃取）、Secure（仅 HTTPS）、 SameSite（防 CSRF）。
SameSite 三个值的选择：
- Lax（默认，推荐）：跨站 GET 携带，POST/PUT/DELETE 不携带。平衡安全与体验，适合大多数站点。
- Strict：完全不跨站携带。最安全，但从外站跳转过来会丢登录态。
- None：跨站全部携带。需同时设 Secure。仅第三方 Cookie 场景使用（如嵌入式广告）， Chrome 已逐步淘汰第三方 Cookie，建议避免。
生产环境：会话 Cookie 用 HttpOnly; Secure; SameSite=Lax，跨子域共享时加 Domain=.example.com。

CORS（跨域资源共享）通过响应头控制浏览器跨域访问。核心头： Access-Control-Allow-Origin（允许的源）、Access-Control-Allow-Methods（允许的方法）、 Access-Control-Allow-Headers（允许的自定义头）、Access-Control-Allow-Credentials（允许携带凭证）、 Access-Control-Max-Age（预检缓存时长）。
"用了 * 还是报错"的三大常见原因：
1. 携带凭证时不能用 *：当前端 fetch(url, { credentials: "include" }) 或 XMLHttpRequest.withCredentials = true 时，服务端 Access-Control-Allow-Origin 必须是具体源（如 https://example.com），不能是 *。否则浏览器报错 "The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*'..."。
2. 预检请求未通过：复杂请求（如自定义头、PUT/DELETE、Content-Type: application/json） 会先发 OPTIONS 预检。预检响应必须正确返回 Allow-Methods、Allow-Headers、Allow-Credentials， 否则实际请求被拦截。
3. 缺少 Vary: Origin：若 Allow-Origin 动态返回（多源白名单），必须配合 Vary: Origin，否则 CDN 缓存会串内容（A 站命中后缓存给 B 站）。
推荐配置：Access-Control-Allow-Origin: https://your-frontend.com + Vary: Origin + Access-Control-Allow-Credentials: true（如需凭证）。

Cache-Control 是 HTTP/1.1 缓存策略核心字段，常用指令： max-age（浏览器缓存秒数）、s-maxage（CDN/共享缓存秒数，覆盖 max-age）、 public（可被中间缓存）、private（仅浏览器缓存，不能 CDN）、 no-cache（强制验证，每次发条件请求）、no-store（完全不缓存）、 immutable（永不变，永久缓存）、stale-while-revalidate（接受过期同时异步重验证）、 must-revalidate（过期后必须验证）。
max-age vs s-maxage：max-age=3600 仅控制浏览器缓存 1 小时； s-maxage=86400 控制 CDN 缓存 1 天。两者并存时，CDN 用 s-maxage，浏览器用 max-age。 典型配置：Cache-Control: public, max-age=3600, s-maxage=86400, stale-while-revalidate=86400。
常用策略：
- 带 hash 的静态资源（如 /_app/main.a1b2c3.js）： Cache-Control: public, max-age=31536000, immutable（一年永久缓存，永不变）。
- HTML 文档：Cache-Control: no-cache（强制验证，配合 ETag）。
- API 响应：Cache-Control: private, max-age=0, no-cache 或 no-store（敏感数据）。
- 用户特定数据：Cache-Control: private, no-cache（不能 CDN）。

Content-Security-Policy（CSP）是防御 XSS 的最强工具，限制资源加载来源。语法 directive source1 source2; directive source1 source2。常用指令：default-src （兜底）、script-src（脚本）、style-src（样式）、img-src（图片）、 font-src（字体）、connect-src（fetch/XHR/WebSocket）、frame-src （iframe）、object-src（Flash/Plugin）。
常见 source 值：'self'（同源）、'none'（完全禁止）、 'unsafe-inline'（允许内联，弱化 CSP）、'unsafe-eval'（允许 eval，弱化）、 https:（任意 HTTPS）、https://cdn.example.com（具体源）、 'sha256-...'（脚本哈希白名单）、'nonce-RANDOM'（一次性 nonce）。
"样式错乱"通常是 CSP 拦截了样式：检查浏览器控制台是否报 "Refused to apply inline style..."，常见原因：
1. <style> 标签或 style="..." 属性被 style-src 'self' 拦截。修复：加 'unsafe-inline' 或用 nonce/hash。
2. 外部 CDN 样式（如 Tailwind CDN）被拦截。修复：style-src 'self' https://cdn.tailwindcss.com。
3. @font-face 字体被拦截。修复：font-src 'self' https://fonts.gstatic.com。
推荐做法：先用 Content-Security-Policy-Report-Only 仅上报不拦截， 观察一段时间再切换到强制 CSP。本站点的 CSP 配置可以参考响应头中的实际值。

三者都涉及"目标/来源"信息，但语义与场景不同：
Host（请求头）：请求目标主机，格式 Host: api.example.com:443。 HTTP/1.1 必需，服务端据此做虚拟主机路由（一台 IP 多个域名）。HTTP/2 改为 :authority 伪头。
Origin（请求头）：请求来源源，格式 Origin: https://www.example.com。 仅含协议+域+端口（不含路径与查询）。仅在跨域请求与 POST 时发送，用于 CORS 判断。 同源 GET 通常不发 Origin。
Referer（请求头）：请求来源完整 URL，格式 Referer: https://www.example.com/page?query=1。注意拼写是历史遗留（应为 Referrer）。 同源与跨域都发送（受 Referrer-Policy 控制），用于防盗链、统计来源。
使用场景：
- CORS 跨域校验：用 Origin（更简洁，仅源）。
- 防盗链（如图片/视频只允许自家页面引用）：用 Referer（带路径，可细分）。
- 统计搜索来源（如 Google 来的关键词）：用 Referer（含 query）。
- 虚拟主机路由：用 Host。
安全提示：Referer 可能泄露敏感 query 参数（如 token、session id）， 建议设置 Referrer-Policy: strict-origin-when-cross-origin（默认值），跨域仅发源不发 query。

完全本地处理，零上传：
- 速查表数据内置在页面 JS 包中，不发起任何网络请求。
- 解析器：你粘贴的 Header 文本仅在浏览器内存中处理，生成键值对表格，不发送到任何服务器。
- 生成器：URL、方法、Header、Body 全部本地处理，生成的 cURL/fetch 代码仅在你本地浏览器中显示， 点击复制按钮才会写入剪贴板。
- 无 Cookie 追踪、无第三方统计、无广告，适合处理含 Authorization、 Cookie 等敏感字段的 Header。
注意：本工具仅生成代码不发起请求——生成的 cURL 命令需你复制到终端执行， 生成的 fetch 代码需你复制到项目运行。本工具不会主动调用你输入的 URL。