简体   繁体   English

“内容长度”标头未包含在 Service Worker fetch 的响应中

[英]"Content-Length" header not included in response from service worker fetch

I'm fetching static assets (images, pdfs, etc) from AWS S3 and displaying their download progresses to the client using the service worker api.我正在从 AWS S3 获取静态资产(图像、pdf 等),并使用 service worker api 向客户端显示它们的下载进度。 To do this, I'm reading the "content-length" header in the response.为此,我正在阅读响应中的“内容长度”标头。 In Chrome Canary (77.0.3821.0) this works fine, but in Firefox (version 67.0) and Chrome (version 75.0.3770.80) there is no "content-length" header in the response.在 Chrome Canary (77.0.3821.0) 中,这可以正常工作,但在 Firefox(67.0 版)和 Chrome(75.0.3770.80 版)中,响应中没有“内容长度”标头。

This answer on SO was helpful in setting the request.mode to "cors" which provided me with some initial success, but so far this only seems to work in Chrome Canary. SO 上的这个答案有助于将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));
}

My S3 bucket CORS configuration rules should be exposing the header unless I'm doing something wrong.我的 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>

I'm not sure why the content-length header is exposed in the Canary response but not in the current Chrome release or Firefox.我不确定为什么在 Canary 响应中公开了 content-length 标头,但在当前的 Chrome 版本或 Firefox 中没有公开。 Are there some other options I need to include in my request to get back a "content-length" header in the response?我的请求中是否还需要包含其他一些选项以在响应中取回“内容长度”标头? Any insights or threads to follow are much appreciated.非常感谢任何要遵循的见解或线索。

Not an answer but rather a workaround... Put the content size in another header.不是答案而是一种解决方法......将内容大小放在另一个标题中。 Create something like 'x-content-length-visible' for the header name, which probably won't be a name guarded from the serviceworker.为标头名称创建类似 'x-content-length-visible' 的内容,这可能不是 serviceworker 保护的名称。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用 fetch() 从请求中获取响应的内容长度 - How to get the content-length of the response from a request with fetch() Service Worker 将文件存储在内容缓存文件中,内容长度为:0 - Service Worker stores files in Content Cache files with content-length: 0 拒绝获得不安全的标题“Content-Length” - Refused to get unsafe header “Content-Length” HTTP Content-Length header 计算javascript - HTTP Content-Length header calculation in javascript casperjs响应标头content-length 0 - casperjs response headers content-length 0 在node.js中,如何获取Content-Length头以响应http.get()? - In node.js, how do I get the Content-Length header in response to http.get()? 拒绝从外部mp3获取不安全的标题“Content-Length”/读取ID3标签 - Refused to get unsafe header “Content-Length” / reading ID3 tags from external mp3's 如何从跨域Ajax请求访问Content-Length标头? - How can I access the Content-Length header from a cross domain Ajax request? 如何从使用 axios 发送的 POST 请求中获取内容长度 header? - How to get the Content-Length header from a POST request send with axios? 使用 ReadableStream 和 Response 从 Service Worker 的 fetch 事件中返回 HTML - Use ReadableStream with Response to return HTML from fetch event of Service Worker
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM