Question

我正在从AWS S3中获取静态资产（图像，pdf等），并使用Service Worker API将其下载进度显示给客户端。为此，我正在读取响应中的“ content-length”标头。在Chrome Canary（77.0.3821.0）中，它可以正常工作，但在Firefox（67.0版）和Chrome（75.0.3770.80版）中，响应中没有“ content-length”标头。

This answer有助于将request.mode设置为“ cors”，这为我带来了一些初步的成功，但是到目前为止，这似乎仅在Chrome Canary中有效。

function respondWithProgressMonitor(clientId, response) {
  for (const key of response.headers.keys()) {
    console.log(key); // returns only "content-type" and "last-modified" on chrome and firefox, but in Chrome Canary includes "content-length"
  }

  const contentLength = response.headers.get('content-length');

  // ...
}
function fetchWithProgressMonitor(event) {
  const request = new Request(event.request.clone(), {
    mode: 'cors',
    credentials: 'omit',
  });
  return fetch(request).then(response => respondWithProgressMonitor(event.clientId, response));
}

除非我做错了事，否则我的S3存储桶CORS配置规则应该公开标头。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>

    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>Content-Length</ExposeHeader>
  </CORSRule>
</CORSConfiguration>

我不确定为什么在Canary响应中显示content-length标头，但在当前的Chrome版本或Firefox中却没有显示。我是否需要在请求中包含其他一些选项，以在响应中获取“ content-length”标头？非常感谢您提供任何见解或线索。

Answer 1

不是答案而是解决方法...将内容大小放在另一个标题中。为标头名称创建类似“x-content-length-visible”的内容，这可能不是 serviceworker 保护的名称。

服务工作者获取的响应中未包含“ Content-Length”标头

1 个答案: