Currently, I am fetching static assets such as images and PDFs from AWS S3 and providing download progress updates to the client using the service worker API. My method involves reading the "content-length" header in the response. Interestingly, this approach works seamlessly in Chrome Canary (version 77.0.3821.0), but I have encountered issues with Firefox (version 67.0) and Chrome (version 75.0.3770.80) as they do not include the "content-length" header in the response.
While referencing this answer on Stack Overflow, setting the request.mode to "cors" did provide some initial success, albeit limited to Chrome Canary at the moment.
Within the function respondWithProgressMonitor(clientId, response):
for key in response.headers.keys():
console.log(key); // In Chrome and Firefox, only "content-type" and "last-modified" are returned, whereas Chrome Canary also 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));
I have configured my S3 bucket's CORS rules to expose the required header unless I am overlooking something.
<?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 am puzzled by the fact that the content-length header is present in the Canary response but absent in the current Chrome release or Firefox. Are there specific options that I should include in my request to ensure a "content-length" header is included in the response? Any guidance or suggestions would be greatly appreciated.