How to set cache-control with aws4fetch?

[OrvilleQ]

Here's my worker.js code modified from https://github.com/obezuk/cf-worker-signed-backblaze-s3-api :

import { AwsClient } from 'aws4fetch'

const HTML = 'some HTML content'

const aws = new AwsClient({
    "accessKeyId": AWS_ACCESS_KEY_ID,
    "secretAccessKey": AWS_ACCESS_KEY_SECRET,
    "region": AWS_S3_REGION
});

addEventListener('fetch', event => {
    event.respondWith(handleRequest(event))
});

async function handleRequest(event) {
    var request = event.request;
    var url = new URL(request.url);
    var headers = new Headers();
    
    url.hostname = AWS_S3_BUCKET + '.' + AWS_S3_ENDPOINT;

    if (request.headers.has('Range')) {
        headers.set('Range', request.headers.get('Range'));
    }

    var signedRequest = await aws.sign(url, {
        "method": request.method,
        "headers": headers,
        "aws": {
            "allHeaders": true
        }
    });

    if (url.pathname === '/') {
        return new Response(HTML, { headers: { 'Content-Type': 'text/html; charset=utf-8' }});
    } else {
        return await aws.fetch(signedRequest, { cf: { "cacheEverything": true, "cacheTtl": 300 }});
    }
}

After deploy to cloudflare worker, I got this:

cf-cache-status is BYPASS with every knid of file. I ask online and they said I should add cache-control header for it.

So is that cf:{} part work and how could I add cache-control header to it?

[mhart]

Just use aws4fetch as you would normally use fetch. I'm not sure on the intricacies of what you're asking as it relates to Cloudflare.

[OrvilleQ]

Cloudlfare won't cache everything from this worker because the cache-control header is max-age=0, no-cache, no-store, I'm wondering if this is a problem with aws4fetch and how to modified this cache-control header.

[mhart]

You can set your own Cache-Control header before you return the Response. aws4fetch just returns a Response in the same way that fetch does.

[OrvilleQ]

You can set your own Cache-Control header before you return the Response. aws4fetch just returns a Response in the same way that fetch does.

I understand, but I'm new to Javascript and http header that I couldn't find out how to add Cache-control header before return the response and I never used fetch before. That's why I'm here seeking for help. 😢

[mhart]

Hi @OrwillT – I think questions like these are best left for the Cloudflare forums where they have the time and resources to answer them. This is an issue tracker, for dealing with bugs in aws4fetch.

Try this, but if it doesn't work, please ask at the Cloudflare forums:

if (url.pathname === '/') {
  return new Response(HTML, { headers: { 'Content-Type': 'text/html; charset=utf-8' }});
}
const awsRes = await aws.fetch(signedRequest, { cf: { "cacheEverything": true, "cacheTtl": 300 }});
if (awsRes.status >= 300) {
  return awsRes;
}
const clonedHeaders = new Headers(awsRes.headers);
clonedHeaders.set('Cache-Control', 'max-age=3600');
return new Response(awsRes.body, {
  status: awsRes.status,
  headers: clonedHeaders
});