聊聊 Timing-Allow-Origin 和 Access-Control-Expose-Headers

一般我们如果做页面性能分析，我们自己带着 Chrome 的 PageSpeed 或者 Audit 就可以了。但是如果我们涉及对关键资源的网络请求的性能埋点的话，我们可以尝试利用 PerformanceTiming
。

它提供了诸如一系列 connectStart domainLookupStart responseEnd 等时间戳的数据。我们可以轻松借用这个 API 做页面的 Performance 的数据埋点。比如可以使用：

const pt = performance.timing;

const domReady = pt.domInteractive - pt.navigationStart
//...

初次之外，我们可以利用 getEntries() 来筛选关键资源，比如你希望埋点的 JS 或者 CSS 资源又或者视频音频资源。

const resource = performance.getEntriesByType('resource');
resource.forEach((item) => {
	// handle your resource timing data
})

当然这个 API 这么好用，为什么我们不用呢。

第一时间还是需要关注兼容性，其实还好。

其次，我们还需要无论是服务端还是 CDN 服务商进行设置一些 Header 头的信息。

Timing-Allow-Origin
需要默认设置;

Timing-Allow-Origin: *
# or
Timing-Allow-Origin: <origin>[, <origin>]*

如图定义的一样，如果我们希望拿到 Resource Timing 的数据，尤其什么 DNS 查询，响应时长这些啊，必须要进行设置。要不然数据会是 0。

但是它并没有拿到 Response Header 里面的全部信息，比如你想要拿到某段资源的 Etag , lastModfied 这些信息。怎么办？

Access-Control-Expose-Headers 就需要你设置了，默认我们利用 XHR 进行 getResponseHeader

XMLHttpRequest.getResponseHeader('Content-Type')

可以获取诸如 Etag Content-Type 的具体值。

Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma

但是上诉这几种，需要我们设置

Access-Control-Expose-Headers: Content-Type, Cache-Control ...;

这样使用 getResponseHeader 就不会抛出异常了。

扩展阅读