需配置 timing-allow-origin 头以启用跨域资源时间数据采集,否则浏览器将 connectstart 等字段置为 0;必须启用 mod_headers 模块并使用 header always set,且该头值须与 access-control-allow-origin 一致或为 * 或指定空格分隔的域名列表。

要在 Apache 中通过 mod_headers 配置 Timing-Allow-Origin,核心目标是让前端性能监控(如 Resource Timing、Navigation Timing)能跨域采集到完整的高精度时间字段(如 connectStart、responseEnd 等),否则浏览器会将这些字段置为 0。
为什么需要 Timing-Allow-Origin
当监控脚本从域名 A 加载,但请求资源来自域名 B(例如静态资源 CDN 或 API 接口)时,浏览器默认屏蔽跨域请求的详细 timing 数据。只有服务端明确响应 Timing-Allow-Origin 头,并且其值匹配或通配请求来源,浏览器才解封这些字段。
注意:它和 Access-Control-Allow-Origin 是独立头,不互相替代;即使已配置 CORS,若没加这个头,timing 仍被截断。
正确配置 Timing-Allow-Origin 的方式
推荐在虚拟主机或全局配置中使用 <location></location> 或 <filesmatch></filesmatch> 精确作用域,避免对所有响应误加:
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度,帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度,帮助开发者将普通页面升级为高品质产品级界面。
- 若允许所有监控调用方(如内部 CDN + 前端域名):
Header always set Timing-Allow-Origin "*" - 若只允许特定来源(更安全,尤其对外服务):
Header always set Timing-Allow-Origin "https://your-app.com https://cdn.your-company.net"(多个域名用空格分隔,不能用逗号) - 搭配 CORS 使用时需注意:
如果
Access-Control-Allow-Origin设为具体域名(非*),则Timing-Allow-Origin必须与之完全一致或也设为该域名;两者不匹配会导致 timing 仍被屏蔽。
必须启用 mod_headers 并确保 always 语义
mod_headers 模块必须已启用(检查:apachectl -M | grep headers);未启用会导致 500 错误。
务必使用 Header always set,而非 Header set:
-
always确保该头注入到所有响应中,包括由mod_proxy、mod_rewrite或静态文件模块生成的响应; - 普通
set在 OPTIONS 预检、错误页、代理转发等场景下常失效,导致 timing 头缺失。
验证是否生效
在浏览器开发者工具 Network 面板中选中一个跨域资源请求,查看 Response Headers:
- 确认存在
Timing-Allow-Origin字段; - 打开 Console,运行:
performance.getEntriesByType('resource'),检查某条记录的connectStart是否为大于 0 的数值(不是 0 或 NaN); - 若仍为 0,检查控制台是否有类似 “The resource timing data is not available due to cross-origin restrictions” 提示,说明头未命中或不匹配。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










