在linux的apache中为静态资源设置跨域缓存响应头，需协同配置cors与缓存头：用精准匹配静态文件后缀，设access-control-allow-origin指定域名、vary origin防cdn混淆、cache-control public,max-age=31536000,immutable实现强缓存，并配合mod_expires设对应mime类型过期时间，禁用html等动态内容缓存。
在 Linux 的 Apache 中为静态资源设置跨域缓存响应头，本质是两件事的组合：正确声明跨域权限（CORS） + 合理控制浏览器缓存行为（Cache-Control / Expires）。二者必须协同配置，否则可能出现“能跨域但不缓存”或“缓存了却因 Vary/Origin 冲突被绕过”的问题。
明确作用范围：只对静态资源生效
不要全局加 CORS 头。静态资源（如 .js, .css, .png, .woff2）通常不需要凭据（credentials），也不涉及敏感操作，适合宽松策略；而 HTML、API 接口则应严格隔离。推荐用 <filesmatch></filesmatch> 或 <locationmatch></locationmatch> 精准匹配：
<ifmodule mod_headers.c>
# 匹配常见静态资源后缀
<filesmatch>
# 跨域允许（开发可临时用 *，生产必须指定域名）
Header always set Access-Control-Allow-Origin "https://app.example.com"
# 允许携带认证信息？静态资源一般不需要，故不设 Allow-Credentials
# 告诉浏览器：这个响应是否随 Origin 变化而不同 → 必须加，否则 CDN 可能缓存错误版本
Header always append Vary Origin
# 缓存策略：强缓存 + 不变性标记（前提是文件名含哈希，如 main.a1b2c3.js）
Header set Cache-Control "public, max-age=31536000, immutable"
</filesmatch></ifmodule>
配合 mod_expires 设置长效过期时间（可选但推荐）
Cache-Control 是现代标准，Expires 主要兼容旧客户端。若已启用 mod_expires，建议保持两者一致，避免歧义：
<ifmodule mod_expires.c> ExpiresActive On # 图片、字体、JS/CSS 设为 1 年 ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" ExpiresByType font/woff2 "access plus 1 year" # 兜底：未匹配类型不缓存 ExpiresDefault "access plus 0 seconds" </ifmodule>
关键细节不能漏
-
Header always set：确保 4xx/5xx 响应也带 CORS 头，避免预检失败时被浏览器静默拦截 -
Vary: Origin：必须添加，否则反向代理或 CDN 可能把https://a.com的响应缓存后返回给https://b.com，导致跨域失败 -
immutable：仅适用于内容不变、URL 唯一的资源（如构建产物带哈希），它告诉浏览器“不必发条件请求”，进一步减少往返 - 不要对
.html文件加这些头：HTML 是动态入口，应设no-cache, must-revalidate或短max-age=60
验证是否生效
重启 Apache 后，用 curl -I -H "Origin: https://app.example.com" http://yoursite/static/main.js 查看响应头，确认同时包含：
Access-Control-Allow-Origin: https://app.example.comVary: OriginCache-Control: public, max-age=31536000, immutable-
Expires:（若有mod_expires）
浏览器开发者工具 Network 标签下刷新资源，检查 Timing 是否显示 from cache 或 from memory cache，且无额外请求。
不复杂但容易忽略
